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;
}
文章来源：https://www.toymoban.com/news/detail-408140.html
文章来源地址https://www.toymoban.com/news/detail-408140.html
到了这里，关于CSS3技巧33：妙用文本溢出text-overflow的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
