文本内容超出省略

• ， 17 4月 2021
• 作者 847954981@qq.com
• 前端学习

文本内容超出省略

在网页中我们经常出现一些文本超出的情况，而一般网页对此的解决方案是通过省略号还省略超出部分。

单行文本超出省略

知识点：强制不换行、元素内容溢出处理和文本溢出省略。

文本内容超出的前提就是文本实现不换行：

white-space: nowrap;//文本不换行

元素内容溢出 overflow

overflow属性决定了超出盒子的内容怎么显示，它有五个效果值：

文本溢出省略 text-overflow

它有两个值：

clip：默认值，表示在内容区域的极限处截断文本，可以简单的理解成超出部分被一刀切掉了。 ellipsis：表示用一个省略号 (“…”)来表示被截断的文本。

多行文本超出省略

在WebKit内核中，多行文本超出省略比较简单，首先我们需要将之前单行文本中的不换行属性white-space: nowrap去掉，并设置一下属性：

/* 隐藏超出部分 */
overflow : hidden;
/* 文本超出就用省略号 */
text-overflow: ellipsis;
/* 把对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* WebKit内核的浏览器的私有属性，设置文本超出2行就用省略号 */
-webkit-line-clamp: 2;
/* WebKit内核的浏览器的私有属性，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;