css 文字多行显示超出显示省略号

css 文字多行显示超出显示省略号

首先，要知道 css 的三条属性。

overflow:hidden; //超出的文本隐藏

text-overflow:ellipsis;//溢出用省略号显示

white-space:nowrap;//溢出不换行

css3 解决了这个问题，解决方法如下：

display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

-webkit-line-clamp:2;//这个属性不是 css 的规范属性，需要组合上面两个属性，表示显示的行数。

最后实现的代码：

(仅限于手动书写 css 的情况)

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; // 参考 https://github.com/postcss/autoprefixer/issues/776

(适用于 webpack 配合预编译工具的情况，会自动将-webkit-box-orient 清除)

打包时必须使用这种方法打包，否则打包后 -webkit-box-orient: vertical 便会消失.

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
/* autoprefixer: off */
-webkit-box-orient: vertical; // 参考 https://github.com/postcss/autoprefixer/issues/776
/* autoprefixer: on */

通常情况下，上面这种注释的方式就有效了，如果因为种种原因无效，尝试另外一种通过 optimize-css-assets-webpack-plugin 插件也能解决这个问题。前提是项目本身就适用了这个插件，不然为了“换行省略号”这个效果去多安装一个 webpack 插件就不划算了。

注释掉webpack.prod.conf.js中下面的代码

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
}),

demo

  
    
    
    
    
    
  

  
    

      
        

          你在组件中使用你在组件中使用你在组件中使用 this.$store.dispatch('xxx')
          分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为
          store.dispatch 调用（需要先在根节点注入 store）：
        
      
    
  

需要注意的一点是，如果换行处是一个完整的英文单词，换行不会将单词拆开，而是会直接将整个单词省略并显示省略号。