本文详解如何用原生 JavaScript 实现多元素标题的自动字符截断功能，解决因误用 jQuery 语法（如 .each()、.text()）导致的失效问题，并提供可直接运行的安全、现代代码示例。
本文详解如何用原生 javascript 实现多元素标题的自动字符截断功能，解决因误用 jquery 语法（如 `.each()`、`.text()`）导致的失效问题，并提供可直接运行的安全、现代代码示例。
在前端开发中，为防止长文本破坏页面布局，常需对标题类文本进行长度限制与优雅截断。但许多开发者从 jQuery 迁移至原生 JavaScript 时，容易沿用类似语法（如 .each() 或 .text()），导致脚本静默失败——这正是本例的核心问题：document.querySelector(".limiter").each(...) 在原生 JS 中根本不存在；text() 也不是 DOM 元素的方法；且 querySelector 仅返回单个元素，无法批量处理。
以下是正确、健壮且符合现代 Web 开发规范的实现方案：
✅ 正确步骤解析
- 选择多个元素：使用 document.querySelectorAll('.limiter') 获取所有匹配元素的静态 NodeList；
- 安全遍历：调用 forEach() 方法（需先将 NodeList 转为数组或直接使用，现代浏览器已支持 NodeList 的 forEach）；
- 读取与清理文本：使用 el.textContent 获取纯文本内容，并通过 .trim() 去除首尾空白（避免空格计入长度）；
- 条件截断：仅当原文本长度超过阈值（如 60）时才执行截断，避免无谓操作；
- 安全截断与省略号：使用 String.prototype.slice(0, limit) 截取前 N 字符（注意：slice(0, 60) 取前 60 个字符，无需 +1；追加 "..." 后总长为 63，语义更清晰），推荐使用模板字符串提升可读性；
- 变量声明现代化：统一使用 const（不可重赋值）或 let（块级作用域），摒弃有变量提升风险的 var。
✅ 完整可运行代码
<!DOCTYPE html>
<html>
<head>
<style>
body > * ~ * { margin-top: 0.5rem; }
</style>
</head>
<body>
<div class="limiter">
Pandemic deaths are spiraling out of control since the opening of the country and now we test the limiter
</div>
<div class="limiter">
Lions and Tigers and Bears, Oh My!
</div>
<div class="limiter">
Short
</div>
<script>
// 定义最大显示长度（不含省略号）
const MAX_LENGTH = 60;
// 获取所有 limiter 元素并逐个处理
document.querySelectorAll('.limiter').forEach(el => {
const text = el.textContent.trim();
if (text.length > MAX_LENGTH) {
// 截取前 MAX_LENGTH 个字符 + 省略号
el.textContent = `${text.slice(0, MAX_LENGTH)}...`;
}
});
</script>
</body>
</html>⚠️ 注意事项与最佳实践
- textContent vs innerText：优先使用 textContent，它获取所有文本节点内容（含隐藏元素），性能更高且行为标准；innerText 受 CSS 影响（如 display: none 的文本不计入），仅在需模拟用户视觉渲染时选用。
- 避免过度截断：slice(0, 60) 已精确控制字符数，切勿写成 substring(0, 61) 或 slice(0, 60 + 1)，易引发边界错误。
- 响应式场景补充：若需支持窗口缩放后动态重计算（如移动端适配），可封装为函数并监听 resize 事件，但需防抖以避免高频触发。
-
无障碍友好：截断后建议添加 title 属性保留完整文本，提升屏幕阅读器体验：
if (text.length > MAX_LENGTH) { el.textContent = `${text.slice(0, MAX_LENGTH)}...`; el.title = text; // 鼠标悬停显示完整标题 }
该方案简洁、高效、无依赖，适用于任何静态或服务端渲染的 HTML 页面，是标题长度控制的标准化原生实现。
