✂️
多行文字截断
生成 -webkit-line-clamp 多行省略号截断的 CSS，指定行数即可，实时预览。
本地处理 · 不上传
加载工具中…
相关：line-clamp · 截断 · 省略号 · 多行 · ellipsis · css
多行文字截断生成器生成限定行数并以省略号结尾的 CSS，超出部分自动隐藏。列表摘要与卡片描述控制高度时的标准做法。
使用步骤
- 设置要保留的行数
- 查看预览效果
- 复制生成的 CSS
- 按需调整行高与宽度
使用场景
- 卡片列表中统一摘要高度
- 控制评论内容的展示行数
- 文章列表的简介截断
- 避免过长标题撑破布局
小贴士
- 多行截断依赖 `-webkit-line-clamp` 配合 `display:-webkit-box` 与 `-webkit-box-orient:vertical`，三行缺一不可，且必须设 overflow:hidden。
- 单行截断用 `text-overflow: ellipsis` 更简单，不需要这套组合。
- 截断只是视觉隐藏，文字仍在 DOM 中，屏幕阅读器会读出全文，SEO 也能抓到完整内容。
常见问题
为什么省略号不显示？
检查是否同时写了 display、box-orient、line-clamp 和 overflow:hidden 四项。少任何一项都不会出现省略号。此外容器不能设固定高度覆盖计算结果。
有更标准的写法吗？
CSS 规范中的 `line-clamp` 属性正在推进，部分浏览器已支持不带前缀的写法。目前稳妥做法是两种都写，让支持的浏览器取新语法。
截断的文字还能被搜索到吗？
能。文字只是被视觉隐藏，仍完整存在于文档中，浏览器的页面内查找、搜索引擎抓取和屏幕阅读器都能获取到全文。
多行文字截断是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用多行文字截断，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。