为控制显示文本的行数，我们一般使用如下的css文件来实现 ~~~css display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; ~~~ 由于该样式经常要使用，每次使用的时候都要定义就非常不方便，因此可以注册一个全局的指定 `v-line-clamp` 实现该功能 ~~~ <div class="abstract" v-line-clamp="3">{{ item.abstract }}</div> ~~~ 修改main.js文件，在创建Vue实例之前，添加以下代码，实现指令的注册 ~~~ // 注册一个全局自定义指令 `v-line-clamp` Vue.directive("line-clamp", { bind: function(el, binding, vnode) { el.style["display"] = "-webkit-box"; el.style["-webkit-box-orient"] = "vertical"; el.style["overflow"] = "hidden"; el.style["-webkit-line-clamp"] = binding.value; }, }); new Vue({ router, store, render: (h) => h(App), }).$mount("#app"); ~~~ ### 能力提升 阅读自定义指令相关的文档，熟悉Vue的高级特性 https://cn.vuejs.org/v2/guide/custom-directive.html