一、 单行文本
样式
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;//显示的行数
有些情况下,多行显示文本会不起作用,有几种解决方法
解决方法
-
可能是因为代码环境的关系
-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;
-
安装依赖
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;
};