要使用CSS实现文本溢出省略号和行数限制显示,可以使用以下样式:
/* 设置文本行数 */
display: -webkit-box;
-webkit-line-clamp: 2; /* 行数限制 */
-webkit-box-orient: vertical; /* 垂直排列 */
/* 溢出隐藏并显示省略号 */
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
其中,关键词包括:-webkit-line-clamp
(行数限制)、-webkit-box-orient
(垂直排列)、overflow
(溢出隐藏)、text-overflow
(省略号显示)、white-space
(空格处理方式)。
这段样式中,使用了 -webkit-box
属性来将文本垂直排列。-webkit-line-clamp
属性设置了文本行数的限制,这里设置为 2
表示只显示两行,超出部分隐藏。
然后,使用了 overflow
属性将溢出的文本进行隐藏,并配合 text-overflow
属性来显示省略号。另外,通过设置 white-space
属性为 normal
来指定空格处理方式为默认值。