单行文本
.single-text-over{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
- 设置如果文字长度超出指定的宽度,则隐藏
- 设置文字一行显示,不能换行。
- 设置文本溢出时,用省略符号来代表被裁剪的文本。
多行文本
.mult-text-over{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
- 设置元素为弹性伸缩盒子模型。
- 设置显示文本的行数。
- 设置伸缩盒子元素的子元素排列方式
- 设置文本溢出时
- 用省略符号来代表被裁剪的文本。
网友评论