📝 CSS Text-Overflow 生成器

文字溢出控制 · 省略号 · 单行/多行截断

⚙️ 设置

🔤 单行省略号 📚 多行截断

👁️ 实时对比

✅ 应用效果

应用 CSS 效果后的文字展示

已应用 text-overflow + overflow + white-space

❌ 无效果

此处文字没有任何溢出控制,超长文本会撑开容器或自动换行

未应用 CSS 效果(默认行为)

📋 生成的 CSS 代码
.text-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

📖 属性说明

属性说明
text-overflowellipsis溢出显示省略号 ...
text-overflowclip溢出直接截断
overflowhidden隐藏溢出的内容(必须)
white-spacenowrap强制单行(单行省略号必须)
-webkit-line-clampN多行截断时的行数(需配合 display: -webkit-box)

💡 常见问题

❓ 为什么设置了 text-overflow 没生效?

检查是否同时设置了 overflow: hidden 和 white-space: nowrap。三者缺一不可。

❓ 多行省略号兼容性如何?

-webkit-line-clamp 在 Chrome、Safari、Edge 中支持良好。Firefox 需开启 layout.css.webkit-line-clamp.enabled。

❓ 可以自定义省略号样式吗?

标准 text-overflow 不支持自定义省略号样式。如需自定义(如使用不同颜色/省略号图标),需要用 JavaScript 方案或伪元素模拟。

❓ 可以在 flex/grid 中使用吗?

可以,但需要确保元素有固定的宽度或 min-width: 0(flex 子项),否则容器会无限扩展导致溢出失效。