text-overflow
属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串(没什么浏览器支持)。
.xx{
text-overflow: ellipsis | clip | string;
}
-
ellipsis:显示省略符号
...
来代表被修剪的文本。 -
clip:剪切文本。
-
string:自定义字符串来代表修剪的文本。不是所有浏览器都支持。
text-overflow
属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串。
需要配合以下两个属性使用:
white-space: nowrap;
overflow: hidden;
常用情景:
1. 单行文本超出范围,出现省略号。
.box{
width: 150px;
height: 30px;
line-height: 30px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
2. 多行文本超出范围,出现省略号。
这个真的是太赞了。经过测试,Chrome 和 Firefox 均支持这个效果。
.box{
width: 150px;
line-height: 30px;
display: -webkit-box;
-webkit-line-clamp: 2; /* 控制行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}