文字溢出控制 · 省略号 · 单行/多行截断
应用 CSS 效果后的文字展示
已应用 text-overflow + overflow + white-space
此处文字没有任何溢出控制,超长文本会撑开容器或自动换行
未应用 CSS 效果(默认行为)
| 属性 | 值 | 说明 |
|---|---|---|
| text-overflow | ellipsis | 溢出显示省略号 ... |
| text-overflow | clip | 溢出直接截断 |
| overflow | hidden | 隐藏溢出的内容(必须) |
| white-space | nowrap | 强制单行(单行省略号必须) |
| -webkit-line-clamp | N | 多行截断时的行数(需配合 display: -webkit-box) |
检查是否同时设置了 overflow: hidden 和 white-space: nowrap。三者缺一不可。
-webkit-line-clamp 在 Chrome、Safari、Edge 中支持良好。Firefox 需开启 layout.css.webkit-line-clamp.enabled。
标准 text-overflow 不支持自定义省略号样式。如需自定义(如使用不同颜色/省略号图标),需要用 JavaScript 方案或伪元素模拟。
可以,但需要确保元素有固定的宽度或 min-width: 0(flex 子项),否则容器会无限扩展导致溢出失效。