HTML卡片式布局中如何实现标题单行省略和内容多行省略-html教程-PHP中文网

单行标题省略必须同时设置text-overflow: ellipsis、width（或max-width）、overflow: hidden、white-space: nowrap四个属性，缺一不可；多行省略首选-webkit-line-clamp，但需配套display: -webkit-box、-webkit-box-orient: vertical和整数行数，且不兼容firefox和旧ie。

html卡片式布局中如何实现标题单行省略和内容多行省略

单行标题省略必须配齐四个 CSS 属性

只写 text-overflow: ellipsis 是没用的，浏览器根本不会渲染省略号。它必须和另外三个属性同时存在才生效：width（或 max-width）、overflow: hidden、white-space: nowrap。

常见错误包括：标题换行了、省略号不出现、整段文字被切掉但没符号。根本原因通常是漏了 width —— 没宽度，浏览器就不知道“从哪开始溢出”。

在卡片布局中，如果标题父容器用了 display: flex，子元素（比如 <h3></h3>）还得加 min-width: 0，否则 flex 会默认拉伸内容，导致宽度计算失效。

white-space: nowrap 不能换成 pre 或 pre-wrap，否则换行逻辑错乱
百分比宽度在 flex 容器里可能不稳定，优先用 max-width: 200px 这类明确值
避免给标题加 text-overflow: clip，它不显示省略号，仅截断

多行内容省略首选 `-webkit-line-clamp`，但有硬性配套要求

这个方案在 Chrome、Safari、Edge（新版）和主流移动端 WebView 中可用，但它不是标准属性，Firefox 和旧 IE 完全不支持。想让它工作，必须同时声明三样：

display: -webkit-box + -webkit-box-orient: vertical + -webkit-line-clamp: 2（或 3）。漏掉任意一个，text-overflow: ellipsis 在多行下就不会触发。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

-webkit-line-clamp 的值只能是整数，不能是 calc()、CSS 变量或表达式
高度不要用 height 硬设，推荐用 line-height: 1.5 × 行数 + 少量余量（比如 margin-bottom: 4px）
内容里含 inline-block 元素或图标时，容易破坏 -webkit-box 的流式布局，导致截断错位
中文标题带顿号、冒号或长英文单词时，line-clamp: 2 容易撑出第 3 行，建议留 1 行余量或改用 JS 截断

表格单元格或 Flex 子项里省略失效？先检查 display 模式

表格单元格（<td>）默认是 <code>display: table-cell，它对 overflow 的响应很弱。直接套单行省略规则往往无效。

解决办法是显式覆盖显示模式：td { display: block; } 或更稳妥地用 td { display: inline-block; }，再配上 width 和其余三属性。

Flex 容器里的子项也类似：即使写了 white-space: nowrap，若没加 min-width: 0，flex 仍可能撑开容器宽度，让省略逻辑失效。

卡片内用 <figure><figcaption></figcaption></figure> 结构时，<figcaption></figcaption> 默认是块级，需手动设 display: block 并加省略规则
不要依赖 text-overflow 在 inline 元素上生效，先转成 inline-block 或 block