css 超出三行显示省略号 并在省略号后留出15px空白
时间: 2025-02-10 09:18:26 浏览: 58
### CSS 实现文本溢出三行并显示省略号
为了实现当文本超过三行时自动截断并在结尾处显示省略号,同时在省略号后面保留15px的空白区域,可以采用以下方法:
#### HTML 结构
```html
<div class="text-container">
MONTBLANC万宝龙 男士经典系列椭圆形针扣皮带/腰带 38157 这里是一些额外的文字用于测试多行文本溢出效果。这里是一些额外的文字用于测试多行文本溢出效果。
</div>
```
#### CSS 样式定义
```css
.text-container {
display: -webkit-box;
-webkit-line-clamp: 3; /* 控制最大行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
position: relative; /* 创建相对定位上下文 */
max-width: 200px; /* 设置容器的最大宽度 */
font-size: 14px; /* 字体大小可以根据实际需求调整 */
}
/* 添加伪元素来创建额外的空间 */
.text-container::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 15px; /* 定义右侧预留空间的宽度 */
height: 1em; /* 高度等于字体高度 */
background: linear-gradient(to right, transparent, currentColor); /* 渐变背景色 */
}
```
上述方案通过 `-webkit-line-clamp` 属性控制最多显示几行文字,并利用 `position:relative` 和伪类 `::after` 来创造一个透明到颜色渐变的小矩形覆盖在最后一行文字末端的位置[^1]。
这种方法不仅能够满足对于特定长度内展示固定数量行的要求,而且还能优雅地处理不同设备上的渲染差异问题。需要注意的是,此解决方案主要适用于 WebKit 浏览器引擎(如 Chrome 和 Safari),而对于其他类型的浏览器可能需要考虑兼容性的补充措施[^2]。
阅读全文
相关推荐


















