css文本省略号

Posted 2022-12-12 yanggb

这里记录下如何用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实现。

 

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