HTML代码:
<div class="container">
<span class="text">这是第一行文本</span>
<span class="text">这是第二行文本,如果超出容器宽度则显示省略号</span>
</div>
CSS代码:
.container {
width: 200px; /* 设置容器宽度 */
height: 50px; /* 设置容器高度,容器高度需要限定,以使第二行文本可以溢出 */
overflow: hidden; /* 当文本溢出容器时进行隐藏 */
}
.text {
display: -webkit-box; /* 将文本显示为块元素 */
-webkit-line-clamp: 2; /* 设置最大显示行数为2 */
-webkit-box-orient: vertical; /* 设置块元素内部文本垂直排列 */
overflow: hidden; /* 当文本溢出块元素时进行隐藏 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
}
通过设置-webkit-line-clamp
属性为2,限制了文本显示的最大行数,超过两行的文本将被隐藏。然后,通过设置text-overflow: ellipsis
和overflow: hidden
,当文本溢出容器时会显示省略号。