如何使用HTML提取固定长度的文本-html教程-PHP中文网

html本身无法提取文本，真正截取需js或后端配合；前端可用textcontent+substring()剥离标签后按字符截取，注意长度判断与空白清理；css的-webkit-line-clamp可实现视觉行数截断。

如何使用html提取固定长度的文本

直接用 HTML 本身无法“提取”文本——它只是标记语言，不带逻辑处理能力。真正能做截取的，是配合 JS 或后端（如 PHP）来实现；前端展示层能做的，只有视觉上的“看起来截断了”，比如用 CSS 控制溢出隐藏。

用 `textContent` + `substring()` 提取纯文本并截取

这是最常用、最可控的方式：先从 HTML 元素中剥离标签，拿到纯文字，再按字符数切。注意中文、英文、符号都算一个字符（不是字节），适合标题、摘要等场景。

textContent 比 innerText 更可靠，它不触发重排，也不受 CSS 隐藏影响
用 substring(0, 60) 截前 60 字符，但别直接拼接省略号——万一原文就不足 60 字，会变成 “内容…”，得加长度判断
如果原始 HTML 含大量空格、换行、制表符，建议先用 .replace(/\s+/g, ' ').trim() 清理

示例：

const el = document.querySelector('.article-content');<br>const rawText = el.textContent.replace(/\s+/g, ' ').trim();<br>const excerpt = rawText.length > 60 ? rawText.substring(0, 60) + '...' : rawText;

用 `strip_tags` + `mb_substr`（PHP 后端截取富文本）

服务端处理更稳妥，尤其面对用户提交的富文本（含 script、style、多余标签）。关键点不在“怎么截”，而在“怎么先干净地拿文本”。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

htmlspecialchars_decode() 要放在 strip_tags() 前，否则
这类实体不会被识别为标签
strip_tags() 默认会保留换行和空格，若想进一步压缩空白，得额外调用 str_replace() 或正则
mb_substr($text, 0, 60, 'utf-8') 必须指定编码，否则中文可能乱码或截半字
别用 substr() 替代 mb_substr()，它按字节切，对 UTF-8 中文极不友好

用 CSS 的 `-webkit-line-clamp` 实现视觉截断

这是唯一真正在浏览器里“按行高+容器高度”自动控制显示范围的方式，适合列表项、卡片标题等需要响应式截断的场景。

必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才生效
IE 完全不支持，Edge 17+ 才开始兼容；若需兼容旧环境，只能降级为固定字符数 JS 截取
它只控制“显示多少行”，不改变 DOM 文本内容，所以 SEO 和可访问性不受影响

示例：

.excerpt {<br>  display: -webkit-box;<br>  -webkit-line-clamp: 2;<br>  -webkit-box-orient: vertical;<br>  overflow: hidden;<br>}

最容易被忽略的是：HTML 标签本身没有“提取”能力，所有所谓“HTML 截取”本质都是“从 HTML 中解析出文本后再操作”。如果你在模板里写 <div>{{ content|truncate(60) }}</div>，背后一定是模板引擎（如 Twig、Blade）或框架（如 Vue 的 computed）在调用字符串处理函数——不是 HTML 自己干的。