CSS 内容超出显示省略号

文章目录

CSS 内容超出显示省略号
- - **1. 单行文本省略（常用）**
  - **2. 多行文本省略（如 2 行）**
  - **3. 对非块级元素生效**
  - **完整示例**
  - **注意事项**

在 CSS 中实现内容超出显示省略号，主要通过控制文本溢出行为来实现。以下是不同场景下的实现方法：

1. 单行文本省略（常用）

.ellipsis {width: 200px;          /* 必须设置固定宽度或最大宽度 */overflow: hidden;      /* 隐藏溢出内容 */white-space: nowrap;   /* 强制文本不换行 */text-overflow: ellipsis; /* 超出部分显示省略号 */
}

关键点：

width 或 max-width 必须明确（否则容器无法判断何时溢出）。
white-space: nowrap 强制文本单行显示。
text-overflow: ellipsis 需配合 overflow: hidden 使用。

2. 多行文本省略（如 2 行）

.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：

span.ellipsis {display: inline-block; /* 或 block */width: 100px;overflow: hidden;white-space: nowrap;/* 强制文本不换行 */text-overflow: ellipsis;
}

完整示例

<!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>