要让一个元素的内容在超出两行时用省略号隐藏,可以使用CSS的 text-overflow
、overflow
、white-space
和 display
属性,同时还需要使用 -webkit-line-clamp
和 display: -webkit-box
(这两个属性主要用于WebKit浏览器,如Chrome和Safari)。
.text {
display: -webkit-box;
-webkit-line-clamp: 2; /* 限制为两行 */
-webkit-box-orient: vertical;
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 超出部分用省略号表示 */
white-space: normal; /* 允许换行 */
/* 你可能还想设置一些其他样式,比如宽度、字体大小等 */
}
请注意,-webkit-line-clamp
和相关的WebKit属性不是标准的CSS属性,尽管它们在大多数现代浏览器中都得到了支持。如果你需要更广泛的浏览器兼容性,可能需要使用JavaScript或jQuery插件来实现相同的效果。