css文本省略号

这里记录下如何用CSS实现单行、多行文本溢出容器的时候用省略号代替溢出部分。

单行文本溢出容器时显示省略号的CSS实现方法

/* 规定当内容溢出元素框（容器）时隐藏 */
overflow: hidden;
/* 规定当文本溢出包含元素（容器）出现省略号 */
text-overflow: ellipsis;
/* 规定段落中的文本不进行换行 */
white-space: nowrap;

要注意的是，因为是要在文本溢出容器时候显示省略号，因此容器是需要有固定的宽度的。

示例：我是想要省略号的文本，哈哈哈哈哈哈啊哈哈。

在上面的示例中，后面的85646464654495467417个哈哈哈都被省略成省略号了。

然后我们来对这些属性和值逐个分解。

overflow

overflow属性规定当内容溢出元素框时发生的事情。

这里使用的是hidden。

text-overflow

text-overflow属性规定当文本溢出包含元素时发生的事情。

这里使用的是ellipsis，是显示省略号的重点。

white-space

white-space属性规定如何处理元素内的空白。

这里使用的是nowrap。

多行文本溢出容器时显示省略号的CSS实现方法

overflow: hidden;
/* 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性，比如下面的两个 */
-webkit-line-clamp: 3;
/* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式，这里是垂直 */
-webkit-box-orient: vertical;

多行这个用的是Webkit的CSS扩展属性，因此只兼容Webkie内核的浏览器，实际场景基本用不上（我没有用过所以这么说，网上找的，嘻嘻）。

同时这些扩展属性也比较新，不知道有没有什么稀奇古怪的Bug（柠檬酸），已知的一个问题是即使末行文本未超出行的情况下也会出现省略号。因此建议还是想想别的折衷方法，比如修改页面布局配合其他CSS属性实现或用JavaScript实现。

"跟雨伞学做人，如果你不为别人挡风遮雨，谁又会把你高高举在头上。"

原文地址：https://www.cnblogs.com/yanggb/p/11314036.html