如何使用 CSS 实现文本溢出省略号显示？
最新回答
茵沫
2021-01-01 13:56:14
在 CSS 中，可以通过以下方法实现文本溢出时显示省略号（...），分为单行和多行两种情况：
一、单行文本溢出省略核心属性：
- overflow: hidden：隐藏溢出内容。
- white-space: nowrap：强制文本不换行。
- text-overflow: ellipsis：溢出部分显示省略号。
代码示例：
.content { width: 200px; /* 必须设置固定宽度或最大宽度 */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}效果：当文本超出容器宽度时，末尾自动显示 ...。
二、多行文本溢出省略多行省略需要结合 -webkit-line-clamp（WebKit 内核浏览器支持）和弹性盒子布局实现。
核心属性：
- display: -webkit-box：启用弹性盒子布局（旧版语法）。
- -webkit-box-orient: vertical：设置垂直排列子元素。
- -webkit-line-clamp: N：限制显示行数（超出部分省略）。
- overflow: hidden：隐藏溢出内容。
代码示例：
.content { width: 200px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 限制显示2行 */ overflow: hidden; text-overflow: ellipsis;}效果：文本超过 2 行时，末尾显示 ...。
注意事项浏览器兼容性：
单行省略兼容所有现代浏览器。
多行省略仅支持 WebKit 内核（Chrome、Safari 等），Firefox 需通过 max-height + line-height 模拟（无原生省略号）。
容器限制：
必须设置固定宽度（如 width: 200px）或最大宽度（max-width），否则无法判断溢出。
动态内容：
若内容通过 JavaScript 动态加载，需确保容器尺寸计算完成后再应用样式。
对于非 WebKit 浏览器，可通过 JavaScript 或伪元素模拟省略效果，但 CSS 原生方案仍推荐优先使用 -webkit-line-clamp。
通过上述方法，可以灵活实现单行或多行文本的溢出省略效果，根据实际需求选择即可。
热门标签
