免费在线CSS text-overflow生成器，文字溢出显示省略号（ellipsis）。支持clip/ellipsis模式，自定义宽度、白空、溢出方式，实时预览。一键复制CSS代码。纯前端处理。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用文字溢出控制 · 省略号 · 单行/多行截断
Updated: 2026-07-11
⚙️ 设置
🔤 单行省略号
📚 多行截断
👁️ 实时对比
✅ 应用效果
应用 CSS 效果后的文字展示
已应用 text-overflow + overflow + white-space
❌ 无效果
此处文字没有任何溢出控制，超长文本会撑开容器或自动换行
未应用 CSS 效果（默认行为）
📋 生成的 CSS 代码
.text-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
📖 属性说明
| 属性 | 值 | 说明 |
|---|---|---|
| text-overflow | ellipsis | 溢出显示省略号 ... |
| text-overflow | clip | 溢出直接截断 |
| overflow | hidden | 隐藏溢出的内容（必须） |
| white-space | nowrap | 强制单行（单行省略号必须） |
| -webkit-line-clamp | N | 多行截断时的行数（需配合 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 子项），否则容器会无限扩展导致溢出失效。