css文本省略号

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

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

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

要注意的是，由于是要在文本溢出容器时候显示省略号，所以容器是须要有固定的宽度的。

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

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

而后咱们来对这些属性和值逐个分解。

overflow

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

值	描述
visible	默认值。内容不会被修剪，会呈如今元素框以外。
hidden	内容会被修剪，而且其他内容是不可见的。
scroll	内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。
auto	若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。
inherit	规定应该从父元素继承overflow属性的值，IE不支持这个值。

这里使用的是hidden。

text-overflow

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

值	描述
clip	默认值。修剪文本。
ellipsis	显示省略符号来表明被修剪的文本。
string	使用给定的字符串来表明被修剪的文本。

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

white-space

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

值	描述
normal	默认值。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式相似HTML中的<pre>标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。
pre-wrap	保留空白符序列，可是正常地进行换行。
pre-line	合并空白符序列，可是保留换行符。
inherit	规定应该从父元素继承white-space属性的值，IE不支持这个值。

这里使用的是nowrap。

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

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

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

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

 

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