css控制文本溢出显示省略号

在构建网页的过程中，由于各种原因，常常需要考虑文本溢出的问题。接下介绍两个最常见的文本溢出的写法：单行文本溢出，以及多行文本溢出。

1.单行文本溢出
四个属性缺一不可，要控制width, 才能出现你想要的省略号

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

max-width: 100px;

效果截图如下

单行文本显示省略号.png


2.多行文本溢出
四行文本溢出之后，才显示省略号

display: -webkit-box;

-webkit-box-orient: vertical;

/* autoprefixer: on */

-webkit-line-clamp: 4;

text-overflow: ellipsis;

overflow: hidden;

效果截图如下

4行文本溢出之后显示省略号.png