本文介绍多种在网页中截取段落前 n 个字符并安全显示的方法，涵盖纯 css 方案、原生 javascript 实现及第三方库推荐，兼顾可访问性与响应式需求。
在前端开发中，常需对长文本（如文章摘要、产品描述）进行截断以控制布局或提升可读性。例如将 <p>This is some text</p> 动态显示为仅前 4 个字符 <p>This</p>。需要注意：直接截取字符串可能破坏语义（如截断在空格、标点或 HTML 标签内），因此应优先选择安全、可维护的方案。
✅ 推荐方案一：纯 CSS（适用于视觉截断，不修改 DOM）
使用 text-overflow: ellipsis 配合固定宽高与 white-space，适合单行标题类场景：
<p class="truncate">This is some text</p>
.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"✅ 推荐方案三：增强交互（展开/收起）
结合按钮实现动态切换，更符合用户体验：
<p id="desc">This is some text that might be very long.</p> <button class="toggle-btn">Show more</button>
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 截断：若段落含 <strong> 等标签，substring() 会破坏结构，此时应使用 textContent（获取纯文本）而非 innerHTML；
- 国际化兼容：中文、日文等无需空格分词，keepWord: false 更合适；
- SEO 与可访问性：截断后建议保留完整文本在 data-full-text 属性中，或使用 aria-label 辅助说明；
- 第三方库参考：如 Readmore.js 提供成熟配置（行数限制、动画、回调），适合复杂项目。
综上，按字符数精确截取推荐使用原生 JavaScript 封装函数——轻量、可靠、易于测试与复用。根据实际场景选择视觉截断（CSS）、逻辑截断（JS）或交互式方案，始终以语义正确性和用户体验为优先。
