要使用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 来指定空格处理方式为默认值。