css一行多出显示省略号

CSS中的text-overflow属性可以帮助我们处理当文本过长时省略号的显示问题。

例如，对于一个宽度为200px的块级元素，若其中的文字较长，会超出该元素的宽度：

<div style="width:200px;">
  This is a very long text that will overflow the div
</div> 

上述代码的输出结果为：

这时，我们可以使用text-overflow属性来控制省略号的显示效果。在元素上加上以下样式：

div {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出隐藏 */
  text-overflow: ellipsis; /* 省略号 */
} 

这里的text-overflow属性值为ellipsis，表示省略号的显示效果。

改变样式后，上述代码的输出结果为：

可以看到，当文本过长时，多余的部分被省略并用省略号代替。

需要注意的是，text-overflow属性只对单行文本起作用。若要省略多行文本，我们需要借助其他技术手段，如JavaScript实现。