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

在构建网页的过程中，由于各种原因，常常需要考虑文本溢出的问题。接下介绍两个最常见的文本溢出的写法：单行文本溢出，以及多行文本溢出。
1.单行文本溢出
四个属性缺一不可，要控制width, 才能出现你想要的省略号

text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 100px;

效果截图如下

文章图片
单行文本显示省略号.png

2.多行文本溢出
四行文本溢出之后，才显示省略号 【css控制文本溢出显示省略号】

display: -webkit-box; -webkit-box-orient: vertical; /* autoprefixer: on */-webkit-line-clamp: 4; text-overflow: ellipsis; overflow: hidden;

效果截图如下

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

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