CSS 内容超出显示省略号
文章目录
- [CSS 内容超出显示省略号](#CSS 内容超出显示省略号)
在 CSS 中实现内容超出显示省略号,主要通过控制文本溢出行为来实现。以下是不同场景下的实现方法:
1. 单行文本省略(常用)
css
.ellipsis {
width: 200px; /* 必须设置固定宽度或最大宽度 */
overflow: hidden; /* 隐藏溢出内容 */
white-space: nowrap; /* 强制文本不换行 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
关键点:
width
或max-width
必须明确(否则容器无法判断何时溢出)。white-space: nowrap
强制文本单行显示。text-overflow: ellipsis
需配合overflow: hidden
使用。
2. 多行文本省略(如 2 行)
css
.multiline-ellipsis {
width: 200px;
display: -webkit-box; /* 使用旧版弹性盒子模型 */
-webkit-box-orient: vertical; /* 内容垂直排列 */
-webkit-line-clamp: 2; /* 限制显示行数 */
overflow: hidden; /* 隐藏溢出内容 */
}
注意:
- 这是
-webkit-
私有属性,兼容性有限(主要支持 WebKit 内核浏览器,如 Chrome/Safari)。 - 不支持 Firefox 和 IE,需根据项目需求谨慎使用。
3. 对非块级元素生效
若元素默认是行内元素(如 <span>
),需添加 display: block
或 inline-block
:
css
span.ellipsis {
display: inline-block; /* 或 block */
width: 100px;
overflow: hidden;
white-space: nowrap;/* 强制文本不换行 */
text-overflow: ellipsis;
}
完整示例
css
<!DOCTYPE html>
<style>
.single-line {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border: 1px solid #ccc;
}
.multi-line {
width: 200px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
border: 1px solid #ccc;
}
</style>
<!-- 单行省略 -->
<div class="single-line">这是一段非常非常非常非常非常非常非常长的单行文本</div>
<!-- 多行省略 -->
<div class="multi-line">这是一段非常非常非常非常非常非常非常长的多行文本,这里的内容会在第二行末尾截断并显示省略号。</div>
注意事项
- 单行省略:广泛兼容所有现代浏览器。
- 多行省略:推荐在移动端或 WebKit 内核环境使用,其他场景可考虑后端截断或 JavaScript 方案。
- 容器尺寸:务必明确容器的宽度(单行)或高度(多行),否则无法触发溢出效果。
:推荐在移动端或 WebKit 内核环境使用,其他场景可考虑后端截断或 JavaScript 方案。
- 容器尺寸:务必明确容器的宽度(单行)或高度(多行),否则无法触发溢出效果。
根据需求选择合适方案,单行场景推荐优先使用 text-overflow: ellipsis
。