/* 设置文本显示2行 */ text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
以上代码中,大家使用了text-overflow:ellipsis
来指定省略号的样式。同时,为了将文本显示在2行,设置了display: -webkit-box
、-webkit-box-orient: vertical
和-webkit-line-clamp: 2
。
请注意,以上代码中使用了-webkit-
前缀。这是为了兼容一些老版本的浏览器,需要添加前缀才能正常使用。
另外,如果想要将省略号显示在第3行或更多行,只需要将-webkit-line-clamp
的值调整即可。
通过CSS,大家可以实现文本的截断并将省略号显示在第二行,使页面更加美观。