css设置超出显示省略号可分两种情况
- 单行文本溢出显示省略号…
- 多行文本溢出显示省略号…
但使用的核心代码是一样的:需要先使用
overflow:hidden;
来把超出的部分隐藏,然后使用text-overflow:ellipsis;
当文本超出时显示为省略号。
一、单行文本超出部分显示省略号
.one-line{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
二、多行文本超出部分显示省略号
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
-moz-box-orient:vertical;
/* 设置宽度和高度 */
width: 200px;
height: 40px;
}
上述代码中,-webkit-line-clamp属性设置为2表示最多显示2行文本,-webkit-box-orient属性设置为vertical表示文本垂直排列。注意这里使用了CSS3的属性,需要在不同浏览器中加上不同的前缀。