HTML怎么设置多行文字省略_html多行文本溢出省略实现【超详细】-html教程-PHP中文网

text-overflow: ellipsis 默认只对单行生效，因其依赖块级元素、overflow: hidden 及 white-space: nowrap 共同作用；多行需用 -webkit-box + -webkit-line-clamp 实现，且 Firefox 等不支持需 JS 降级。

html怎么设置多行文字省略_html多行文本溢出省略实现【超详细】

为什么 `text-overflow: ellipsis` 默认只对单行生效

因为 CSS 规范里，text-overflow 依赖两个前提：元素必须是块级且 overflow: hidden，同时内容必须处于「单行流」中（即 white-space: nowrap）。多行文本天然打破这个流，所以直接加 text-overflow: ellipsis 没反应。

常见错误现象：display: -webkit-box 忘了配 -webkit-line-clamp，或漏掉 overflow: hidden，结果文字照常换行溢出。

-webkit-line-clamp 是 WebKit 内核专属属性，Firefox 和旧版 IE 完全不支持
必须配合 display: -webkit-box + -webkit-box-orient: vertical 才能启用行数截断逻辑
父容器需有明确高度或最大高度（max-height），否则 -webkit-line-clamp 可能失效

用 `display: -webkit-box` 实现三行省略的最小可靠写法

这是目前兼容性最好、浏览器行为最可控的方案（Chrome/Safari/Edge 均支持，Firefox 需 fallback）。

.multi-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-word;
}

关键点：

-webkit-line-clamp: 3 表示最多显示 3 行，超出部分裁剪并加省略号
word-break: break-word 防止超长英文单词撑破容器（overflow: hidden 下它可能被截断但不换行）
不要用 white-space: pre-wrap 或 pre-line，它们会干扰 -webkit-box 的布局计算
如果内容含或等内联元素，确保它们没设置 vertical-align: top/middle，否则可能导致行高错乱、截断位置偏移

Firefox 和旧浏览器怎么 fallback

Firefox 直到 v125 才开始实验性支持 -webkit-line-clamp（需开启 layout.css.line-clamp.enabled），生产环境不能依赖。稳妥做法是 JS 辅助截断。

简单 JS 方案（适合内容静态、DOM 不频繁更新的场景）：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

function clampText(el, lineCount = 3) {
  const lineHeight = parseInt(getComputedStyle(el).lineHeight) || 1.2 * parseInt(getComputedStyle(el).fontSize);
  el.style.maxHeight = `${lineCount * lineHeight}px`;
  el.style.overflow = 'hidden';
}
clampText(document.querySelector('.multi-ellipsis'), 3);

注意：