CSS - 多余文字省略号显示

一、 单行文本

样式

white-space:nowrap; //溢出不换行
overflow:hidden;  //超出部分隐藏
text-overflow:ellipsis; //超出部分设置省略号显示

// 需要是一个有固定宽度的块元素
width: 200px;
display: inline-block;

二、多行文本

样式

overflow:hidden;  // 超出部分隐藏
text-overflow:ellipsis;  // 溢出显示用省略号

// 这几条属性是重点
display:-webkit-box; //作为弹性伸缩盒子模型展示
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式，从上至下垂直排列
-webkit-line-clamp:2;//显示的行数

有些情况下，多行显示文本会不起作用，有几种解决方法

解决方法

1. 可能是因为代码环境的关系-webkit-box-orient被过滤掉了 autoprefixer 这个关键字可以免除被过滤的动作。

     display:-webkit-box;
     text-overflow:ellipsis;
     -webkit-line-clamp:2;
     /*! autoprefixer: off */
     -webkit-box-orient: vertical;
     /* autoprefixer: on */
     overflow: hidden;
   

   或者

     display:-webkit-box;
     text-overflow:ellipsis;
     -webkit-line-clamp:2;
     /*! autoprefixer: ignore next */
     -webkit-box-orient: vertical;
     overflow: hidden;
   

2. 安装依赖

   npm i -S optimize-css-assets-webpack-plugin
   

   并且注释掉 build —> webpack.prod.conf.js中的一段代码

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

三、JS 控制省略号显示

 getEllipsis = content => {
   let str = content;
   if (str.length > 200) {
     str = str.substring(0, 200) + "...";
   }
   return str;
 };