CSS实现单行、多行文本溢出显示省略号

CSS实现单行文本溢出显示省略号

white-space: nowrap;  // 文本不换行
overflow: hidden;  // 溢出隐藏
text-overflow: ellipsis;  // 文本溢出显示省略号

效果：

CSS实现多行文本溢出显示省略号

display: -webkit-box; // 设置弹性伸缩盒子模型
-webkit-box-orient: vertical; // 设置子元素排列方式
-webkit-line-clamp: 3; // 限制在一个块元素显示的文本行数
overflow: hidden; // 溢出隐藏

效果：

如果在项目中配置了autoprefixer，webpack打包vue项目时，-webkit-box-orient: vertical; 会被自动忽略。

在 -webkit-box-orient: vertical 之前添加注释关闭autoprefixer，然后再开启：

display: -webkit-box; // 设置弹性伸缩盒子模型
/*! autoprefixer: off */ 
-webkit-box-orient: vertical; // 设置子元素排列方式
/*! autoprefixer: on */
-webkit-line-clamp: 3; // 限制在一个块元素显示的文本行数
overflow: hidden; // 溢出隐藏

参考文章

注意：文本容器需要设置宽度width，多行文本要根据实际情况设置高度height。