如何在 HTML 中截取并显示指定数量的字符

聖光之護 2026-01-10 00:00:00 次阅读

本文介绍多种在网页中截取段落前 n 个字符并安全显示的方法，涵盖纯 css 方案、原生 javascript 实现及第三方库推荐，兼顾可访问性与响应式需求。

在前端开发中，常需对长文本（如文章摘要、产品描述）进行截断以控制布局或提升可读性。例如将

This is some text

动态显示为仅前 4 个字

符

This

。需要注意：直接截取字符串可能破坏语义（如截断在空格、标点或 HTML 标签内），因此应优先选择安全、可维护的方案。

✅ 推荐方案一：纯 CSS（适用于视觉截断，不修改 DOM）

使用 text-overflow: ellipsis 配合固定宽高与 white-space，适合单行标题类场景：

This is some text

.truncate {
  width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

⚠️ 局限：仅视觉隐藏，全文仍存在于 DOM；不支持多行或按字符数精确截取。

✅ 推荐方案二：原生 JavaScript（精准、可控、无依赖）

以下函数安全截取前 n 个字符，自动处理空格边界，避免单词中间截断（可选）：

function truncateText(text, maxLength = 4, keepWord = true) {
  if (text.length <= maxLength) return text;
  if (!keepWord) return text.substring(0, maxLength);

  // 截取到最近的空格位置，避免单词断裂
  const truncated = text.substring(0, maxLength).replace(/\s+\S*$/, '');
  return truncated || text.substring(0, maxLength);
}

// 应用示例
const p = document.querySelector('p');
p.textContent = truncateText(p.textContent, 4); // → "This"

✅ 推荐方案三：增强交互（展开/收起）

结合按钮实现动态切换，更符合用户体验：

This is some text that might be very long.

const desc = document.getElementById('desc');
const btn = document.querySelector('.toggle-btn');
const fullText = desc.textContent;
const shortText = truncateText(fullText, 12);

desc.textContent = shortText;
btn.addEventListener('click', () => {
  if (desc.textContent === shortText) {
    desc.textContent = fullText;
    btn.textContent = 'Show less';
  } else {
    desc.textContent = shortText;
    btn.textContent = 'Show more';
  }
});

⚠️ 注意事项

避免内联 HTML 截断：若段落含 等标签，substring() 会破坏结构，此时应使用 textContent（获取纯文本）而非 innerHTML；
国际化兼容：中文、日文等无需空格分词，keepWord: false 更合适；
SEO 与可访问性：截断后建议保留完整文本在 data-full-text 属性中，或使用 aria-label 辅助说明；
第三方库参考：如 Readmore.js 提供成熟配置（行数限制、动画、回调），适合复杂项目。

综上，按字符数精确截取推荐使用原生 JavaScript 封装函数——轻量、可靠、易于测试与复用。根据实际场景选择视觉截断（CSS）、逻辑截断（JS）或交互式方案，始终以语义正确性和用户体验为优先。