用css样式设置出高度和宽度时，显示省略号

用css样式设置超出高度，显示省略号

超出宽度

样式设置过程中，有时候，当文本长度超过显示区域时，我们要将文本的显示截断，并增加省略号，以表示内容不止于此。可以使用如下样式：

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

overflow属性设置超出的内容隐藏，white-space设置内容不换行，text-overflow设置内容隐藏时，出现省略号。
此设置要注意的时，宽度是不是进行了设置，若宽度是自适应的，那么自然不会出现文本超出显示区域的问题，省略号不会出现。

超出高度

当内容超出高度之后，设置的样式如下：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

此样式会在显示内容超过2行之后，隐藏后面的内容，并显示省略号。

这篇好文章是转载于：学新通技术网