HTML移动端多行文本布局的省略实现-html教程-PHP中文网

text-overflow: ellipsis仅支持单行省略，因依赖white-space: nowrap强制不换行；多行需用-webkit-line-clamp配合display: -webkit-box和-webkit-box-orient: vertical，且必须设overflow: hidden与明确宽度。

html移动端多行文本布局的省略实现

移动端多行文本省略不能只靠 text-overflow: ellipsis，它天生只支持单行；真要截 2–3 行并带省略号，-webkit-line-clamp 是目前最轻量、兼容性可接受的纯 CSS 方案，但必须配齐三件套，漏一个就白写。

为什么 `text-overflow: ellipsis` 在多行下完全不生效

text-overflow: ellipsis 的设计逻辑就是“单行溢出时加点”，它依赖 white-space: nowrap 强制文本不换行——这意味着你根本没机会让它作用于第二行。哪怕你给容器设了 height: 4em + overflow: hidden，也只会粗暴裁剪，不会出现省略号。

常见错误现象：

文字被切掉半行，末尾没省略号
开发者误以为是 line-height 算错，反复调高度，结果毫无改善
在 Safari 上偶尔显示，在 Chrome/Firefox 完全不触发

`-webkit-line-clamp` 必须搭配的三个属性

这个非标准属性不是开关，而是“触发器”，只有和以下两个声明一起用才起效：

display: -webkit-box：启用 WebKit 特有的弹性盒模型（注意不是标准 display: flex）
-webkit-box-orient: vertical：告诉浏览器主轴朝下，让文本按行堆叠
overflow: hidden：必须显式写，不能靠父级继承

缺任何一个，-webkit-line-clamp: 2 都只是个被忽略的声明。另外，width 或 max-width 也得有——移动端推荐用 max-width: 100% 或 max-width: 30ch，比固定像素更适应不同屏幕。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

移动端特别要注意的坑

在 iOS Safari 和 Android Chrome 上，这些细节会直接导致省略失效：

容器内含或等内联元素时，如果它们设了 vertical-align: top，会拉高整行行高，导致第 3 行实际只显示了半行，-webkit-line-clamp 截断位置偏移
Flex 布局中父容器用了 flex: 1，子元素没加 min-width: 0，会导致宽度计算异常，省略不触发
字体加载期间 DOM 已渲染，但 Web Font 尚未就绪，初始行高不准，可能造成第一帧显示不全或省略过早（可加 font-display: swap 缓解）
Firefox 直到 v125 才实验性支持 line-clamp（需手动开启 layout.css.line-clamp.enabled），生产环境不能依赖

表格单元格里别硬上 `-webkit-line-clamp`

在 上强行覆盖 display: -webkit-box 会破坏表格布局：列宽崩塌、相邻单元格错位、iOS Safari 下偶发白屏。这不是写法问题，是 display: table-cell 和 -webkit-box 底层渲染冲突。

可行替代方案只有两个：



服务端提前截断字符串，返回带 "…" 的结果（推荐用于 ID、URL、日志等关键字段）
前端用 ::after 伪元素遮罩：设 max-height: 4.2em（line-height: 1.4em × 3），position: relative，再用渐变背景 + content: "\2026" 覆盖右下角

真正容易被忽略的是语义和可访问性：CSS 省略只改视觉，DOM 文本完整保留，屏幕阅读器仍读全部内容。如果省略的是错误码、订单号或权限提示，宁可服务端处理，也不要前端“看起来整齐”。