[分享]css只允许展示固定长度文本

在CSS中有时需要限制文本长度以达到美观的效果。可能会遇到这样的需求：只展示一定长度的文本，多余部分省略号代替。实现这个效果可以使用CSS中的textoverflow属性。textoverflow属性...

在CSS中有时需要限制文本长度以达到美观的效果。可能会遇到这样的需求：只展示一定长度的文本，多余部分省略号代替。
实现这个效果可以使用CSS中的text-overflow属性。text-overflow属性需要配合white-space和overflow属性一同使用。white-space用来规定是否允许文本换行，overflow用于规定超出部分如何处理。而text-overflow属性则用来指定溢出时如何显示省略号。
以下是示例代码：

p {
    white-space: nowrap; /* 不允许换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
    width: 200px; /* 定宽，方便演示 */
} 

通过设置width属性可以限制文本长度。当超过宽度时，文本会被隐藏，多余部分会用省略号代替。如果要改变省略号的样式，可以使用text-overflow的另个值clip。
在实际使用中，text-overflow属性不仅可以用于限制段落文本长度，还可以用于限制表格列宽、标签云等等场景。
需要注意的是，text-overflow属性只适用于单行文本，多行文本需要使用其它技术实现。另外，text-overflow属性的兼容性不是很好，需要做好浏览器兼容性处理。