為控制顯示文本的行數，我們一般使用如下的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