在CSS中,我们经常使用省略号来显示过长的文本,但有时候会出现两行字的情况: .text { overflow: hidden; text-overflow: ellipsis; display: -
在CSS中,我们经常使用省略号来显示过长的文本,但有时候会出现两行字的情况:
.text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 此处省略其他属性 */ }
这时候会出现两行文字,但只有第二行出现了省略号,显得有些奇怪。这是因为在CSS中,多余的省略号只会在最后一行出现。
解决这个问题的方法也很简单,只需要在硬换行(<br>
)之后插入一个零宽空格即可。
代码如下:
.text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.5em; max-height: 3em; /* 此处根据行高和行数计算,需要根据实际情况调整*/ } .text::after { content: "200B"; display: inline-block; width: 0; height: 0; }
这样就可以完美解决两行字多余省略号的问题了。
粉丝
0
关注
0
收藏
0