悠悠楠杉
网站页面
Web前端文本溢出处理及实现方法
05/30
1. 单行文本省略实现方法：
使用CSS样式 .single-line-ellipsis 可实现单行文本的省略效果。例如：
css
.single-line-ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
将上述样式应用于HTML元素：<div class="single-line-ellipsis">单行文本超出部分将以省略号表示。</div>。这样，当文本超出指定宽度时，将显示为“...”。
2. 多行文本省略实现方法：
使用CSS样式 .multi-line-ellipsis 可实现多行文本的省略效果，限制在两行内显示。例如：
css
.multi-line-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 200px;
}
将上述样式应用于HTML元素：<div class="multi-line-ellipsis">多行文本超出两行将以省略号表示。</div>。这样，当文本超出两行时，将显示为“...”。
