CSS 截取多余字符串 + 在尾部显示省略号

文本溢出

有时候，我们的文本内容会溢出容器大小，例如下面这样：

<div style="width: 100px; background: #a7d129; ">balabalabalabala</div>

溢出隐藏

针对溢出部分的文本内容，我们当然是可以选择隐藏的，使用 overflow: hidden; 方法。

<div style="width: 100px; background: #a7d129; overflow: hidden;">balabalabalabala</div>

截取多余字符 + 显示省略号 ...

通常我们隐藏了多余的文本之后，需要在文本的尾巴显示 ... 省略号提醒用户，而且单纯的使用 overflow: hidden 溢出隐藏，不够容器的文字会只显示一半，不够美观。修复 例2 的代码达到我们想到的效果，只需要在添加一个 text-overflow 属性仅可。

<div style="width: 100px; background: #a7d129; text-overflow: ellipsis; white-space:nowrap; overflow:hidden;">balabalabalabala</div>

ps: white-space:nowrap 属性是用于设置文本不自动换行。text-overflow 单独使用没有任何效果，需要配合 overflow:hidden 一起使用属性。