如何判断text-overflow: ellipsis

如何判断text-overflow: ellipsis

网页开发的时候，有些页面的内容有的会比较长，就需要使用截取内容显示，或隐藏部分内容来显示。

在隐藏内容显示时，我们可以用样式text-overflow: ellipsis来为隐藏的部分显示省略符号。那么怎么判断什么时候该使用这个样式呢？下面来看下。

假设有一个ul无序列表，html如图，显示几行内容。

为html添加一些修饰的样式，如图。

页面显示如图，现在的效果还不错。

但如果页面宽度有限，或内容较多，只允许这个列表有118px的宽度，我们在样式里添加上这个宽度:width: 118px;

然后页面显示如图，这个效果勉强可以，

但如果又要求，每一行li的内容不允许换行，再为li加上样式：

white-space: nowrap;

让内容不换行，现在的效果如图，现在的效果就比较差了。

为了让内容不撑开容器，显示到外面。我们为li再添加样式：

overflow: hidden;

隐藏超出的内容。

但为了让用户知道，这里的内容隐藏了部分，我们可以添加样式:

text-overflow: ellipsis;

来让其在后面添加上省略号，完整的css样式如图。

最终的页面效果如图。

所以当我们在页面空间宽度不大的地方，显示较长内容时，需要截取内容显示，就可以使用这个text-overflow: ellipsis的样式，在内容后面添加上省略号，来提示用户这里的内容是有截取的。