文字超过 N 行收成省略号, 一键复制 CSS 与 Tailwind 写法, 带实时预览, 浏览器本地运算
- 本地处理
- 分类 开发运维
- 适合 格式化、校验、压缩或检查和代码相关的文本。
超过这么多行的文字会收成结尾的 …
在 -webkit- 前缀之外再加一条 W3C 标准 line-clamp 属性
随便改, 预览盒子宽度固定, 一眼看出截在哪
display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; line-clamp: 3;
.clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3;
line-clamp: 3;
}line-clamp-3
这个工具能做什么
一个 CSS 多行文本截断 (line clamp) 生成器, 把长文本收成干净的 N 行, 末尾留一个省略号。选好保留几行, 工具就把整套写法写好: 兼容性最广的 -webkit-box 方案 (display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: N), 再附上现代标准的 line-clamp 属性做前瞻兜底。行数设成 1 时自动切到更轻的单行 text-overflow: ellipsis 方案, 根本不必动用弹性盒子。实时预览给一段可编辑示例文本和 固定宽度的盒子, 一眼看清截在第几行收尾, 不会再出现「以为会截结果没截」 的尴尬。纯 CSS、带选择器的 CSS、对应的 Tailwind 工具类 (line-clamp-3 这类) 都能一键复制。行数写进网址, 分享链接即可还原你的 配置。全部在浏览器里运算, 不上传, 不追踪。
工具细节
- 输入
- 文本 + 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 9 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 开发运维 · 程序员
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 多行截断生成器 适合怎么用
适合穿插在写代码、查问题、做 Review、上线前的小任务里。
适合开发场景
- 格式化、校验、压缩或检查和代码相关的文本。
- 把片段整理好再放进文档、工单、提交或交接材料。
- 不切换工具,快速检查一个小 payload。
开发检查项
- 压缩、混淆这类不可逆处理,先对副本操作。
- 除非确认工具本地处理,不要粘贴密钥和敏感片段。
- 转换后的代码上线前,仍要跑自己的测试或 lint。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
给信息流卡片的标题和描述做截断
商品网格或博客信息流要求每张卡片一样高, 不管标题多长。把标题截两行、 描述截三行, 四十个字的标题就收成整齐的两行加省略号, 而不会把卡片 撑得比邻居高。两段 CSS 直接复制进卡片样式即可。
让表格单元格和列表行保持一行高
一列文件名或邮件主题, 只要有一条换行整体就乱。把行数设成 1, 取 text-overflow: ellipsis 那套, 每个单元格都保持一行, 过长的末尾带 省略号。工具会提示单行截断不需要更重的 -webkit-box 写法。
在 Tailwind 项目里截断预览文本
你在 Tailwind 应用里给评论预览排版, 想最多三行。不用手写 webkit 前缀, 从工具里读出 line-clamp-3 这个 class 贴到元素上。改行数 class 也跟着变, 提交前能先比两行和三行哪个好看。
用真实预览决定截两行还是三行
设计师常为摘要该截两行还是三行争执。把真实文案粘进示例框, 切换 行数, 看每个选项截在哪里。在真实文字上看到真实省略号, 比对着规范 空想快得多, 分享链接还能把这份配置原样发给同事。
常见踩坑
忘了容器要有真实宽度。-webkit-line-clamp 只有在文字真的换行后才截断, 所以没宽度或 inline 显示的元素会把每一行都显示出来。先给它块级显示和宽度或 max-width, 再指望截断生效。
漏掉 overflow hidden。光有行数没用, overflow 保持 visible 截断就不发生; 是 hidden 把超出行数的部分藏起来并触发省略号。四条声明要一起复制, 别只抄 -webkit-line-clamp。
只要一行却用了 -webkit-box。单行截断该用 overflow hidden、white-space nowrap 和 text-overflow ellipsis。-webkit-box 写法带来你用不上的弹性盒子行为, 还可能跟内边距和 inline 子元素打架。
隐私说明
生成器是浏览器标签页里运行的纯 JavaScript。你输入的示例文本、行数和 生成的 CSS 都不离开页面, 也不记录。唯一会传出去的是分享链接查询字符串 里的行数, 如果你把链接粘到聊天里, 对方服务器的访问日志会看到它。示例 文本本身是本地状态, 从不写进网址, 所以怎么改都是私密的。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。