登录
首页 >  文章 >  前端

JS截断60字符标题的实用方法

时间：2026-03-05 21:18:51 293浏览 收藏

本文深入解析了如何用原生 JavaScript 安全、高效地实现多元素标题的60字符自动截断，直击开发者从 jQuery 迁移时误用 `.each()`、`.text()` 等语法导致脚本静默失效的常见痛点，不仅厘清 `querySelector` 与 `querySelectorAll` 的本质区别、`textContent` 与 `innerText` 的适用场景，还提供了开箱即用的现代代码——支持空格清理、条件截断、省略号添加及无障碍优化（如 `title` 属性保留全文），兼顾性能、可维护性与用户体验，是前端日常开发中标题长度控制的标准化、无依赖解决方案。

如何使用纯 JavaScript 实现标题字符长度限制（60 字符截断）

本文详解如何用原生 JavaScript 实现多元素标题的自动字符截断功能，解决因误用 jQuery 语法（如 .each()、.text()）导致的失效问题，并提供可直接运行的安全、现代代码示例。

本文详解如何用原生 JavaScript 实现多元素标题的自动字符截断功能，解决因误用 jQuery 语法（如 `.each()`、`.text()`）导致的失效问题，并提供可直接运行的安全、现代代码示例。

在前端开发中，为防止长文本破坏页面布局，常需对标题类文本进行长度限制与优雅截断。但许多开发者从 jQuery 迁移至原生 JavaScript 时，容易沿用类似语法（如 .each() 或 .text()），导致脚本静默失败——这正是本例的核心问题：document.querySelector(".limiter").each(...) 在原生 JS 中根本不存在；text() 也不是 DOM 元素的方法；且 querySelector 仅返回单个元素，无法批量处理。

以下是正确、健壮且符合现代 Web 开发规范的实现方案：

✅ 正确步骤解析

  1. 选择多个元素：使用 document.querySelectorAll('.limiter') 获取所有匹配元素的静态 NodeList；
  2. 安全遍历：调用 forEach() 方法（需先将 NodeList 转为数组或直接使用，现代浏览器已支持 NodeList 的 forEach）；
  3. 读取与清理文本：使用 el.textContent 获取纯文本内容，并通过 .trim() 去除首尾空白（避免空格计入长度）；
  4. 条件截断：仅当原文本长度超过阈值（如 60）时才执行截断，避免无谓操作；
  5. 安全截断与省略号：使用 String.prototype.slice(0, limit) 截取前 N 字符（注意：slice(0, 60) 取前 60 个字符，无需 +1；追加 "..." 后总长为 63，语义更清晰），推荐使用模板字符串提升可读性；
  6. 变量声明现代化：统一使用 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 页面，是标题长度控制的标准化原生实现。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS截断60字符标题的实用方法》文章吧，也可关注golang学习网公众号了解相关技术文章。

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>