
让固定高度div的第二行文本超出时显示省略号
本文提供一种CSS技巧,让指定宽高的div在文本超过两行时,自动显示省略号。
解决方案:利用CSS多行文本截断
核心在于使用-webkit-line-clamp CSS属性。以下代码示例演示了如何实现:
浮动元素的定位机制 正如前面所述,浮动元素脱离文档流,向左或向右移动,直到遇到容器边界或其他浮动元素。
.text {
width: 200px;
height: 38px;
display: -webkit-box;
-webkit-line-clamp: 2; /* 只显示两行 */
-webkit-box-orient: vertical;
overflow: hidden;
}
代码解释:
我们首先定义了div的宽度和高度。display: -webkit-box; 将元素设置为WebKit盒子模型。-webkit-line-clamp: 2; 限制显示文本行数为2。-webkit-box-orient: vertical; 设置盒子方向为垂直。overflow: hidden; 隐藏超出部分。
需要注意的是,此方法主要兼容WebKit内核浏览器(例如Chrome和Safari)。 对于其他浏览器,可能需要使用其他CSS属性或JavaScript库来实现类似效果。










