HTML本身无法提取文本，真正截取需JS或后端配合；前端可用textContent+substring()剥离标签后按字符截取，注意长度判断与空白清理；CSS的-webkit-line-clamp可实现视觉行数截断。
直接用 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、多余标签）。关键点不在“怎么截”，而在“怎么先干净地拿文本”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
htmlspecialchars_decode()要放在strip_tags()前，否则 <p> 这类实体不会被识别为标签 -
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 自己干的。
