📅  最后修改于: 2023-12-03 14:55:03.064000             🧑  作者: Mango
当文本内容过长时,我们往往需要对其进行省略处理。CSS提供了多种方式实现文本溢出的省略显示,其中最常用的方式是使用省略号。本文将介绍如何使用CSS实现文本的省略显示,并且仅显示 2 行内容。
text-overflow是CSS中一个用于控制文本展示样式的属性。其可以用于省略文本,并显示省略号。
.ellipsis {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 省略号 */
}
这种方式只需要三行代码即可实现,但是只能控制行内元素的省略显示效果,并且无法控制省略的行数。
line-clamp是CSS中用于控制文本行数的属性,当文本内容超出指定行数时,将会被省略并添加省略号。但是该属性只能用于块级元素。
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示 2 行 */
overflow: hidden; /* 超出部分隐藏 */
}
这种方式可以控制文本行数,并且控制究竟需要显示几行,但是需要注意的是,该方式只支持webkit内核的浏览器。
当需要同时控制文本行数和省略显示时,我们可以将上述两种方式进行结合使用。
.ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示 2 行 */
white-space: normal; /* 允许换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 省略号 */
}
这种方式,既可以控制文本行数,又可以显示省略号。
以上三种方式都可以实现文本的省略显示,并且该功能在实际开发中经常用到。在选择实现方式时,需要根据实际情况进行选择,选择最合适的方式。