css 超出的显示省略号 |divcss布局模板

.line-clamp {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}

上面这段CSS代码就是添加省略号的常用代码。其中产生省略号的关键就是使用了text-overflow属性。text-overflow属性有如下几个属性值：

• clip：默认属性值，超出的文本被剪切。
• ellipsis: 用省略号（…）表示被修剪的文本。
• string：使用给定的字符串值替换被修剪的文本。

而要让text-overflow属性生效，还需要满足以下条件：

• 要在单行的元素上使用
• 要有设置宽度
• 要有overflow:hidden包裹

除了text-overflow属性外，还有添加省略号的其他方式，比如在一些多行文本的情况下，可以使用-webkit-line-clamp属性搭配-webkit-box-orient和display:-webkit-box来设置超出部分隐藏并添加省略号。

总而言之，在需要添加省略号的情况下，大家只需要使用text-overflow属性，并满足其使用的条件即可。