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。