在 CSS 中,我们经常需要对文本进行格式化和美化。一种常见的需求是在某些情况下将文本截断为两行,并且第二行以省略号(...)结束。这个问题的解决方案可以使用 CSS 的 text-overflow
在 CSS 中,我们经常需要对文本进行格式化和美化。一种常见的需求是在某些情况下将文本截断为两行,并且第二行以省略号(...)结束。这个问题的解决方案可以使用 CSS 的 text-overflow
属性。
/* 截断为两行,并以省略号结束 */
.two-lines {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 行数为两行 */
-webkit-box-orient: vertical;
}
如上,我们设置了容器的高度并隐藏其溢出部分。使用 text-overflow: ellipsis
属性,我们能够在第二行文本末尾添加省略号。其中的关键部分是使用 -webkit-box
和 -webkit-line-clamp
属性将文字限制在两行内。请注意,要使用这些 CSS 属性,你需要提供一个具有固定高度(例如,像素或 em)的容器。
粉丝
0
关注
0
收藏
0