自动省略号

在网页开发中，我们经常会遇到文本溢出显示省略号的需求：比如文章列表的摘要、卡片的简介、商品名称等，单行或多行文本超出容器时，自动截断并显示 …，保持页面整洁美观。

CSS 的 text-overflow: ellipsis 只能解决单行省略，多行省略在现代浏览器中可以用 -webkit-line-clamp，但兼容性和灵活性有限。这时候，专门的 JS 库就是更好的选择。

这里介绍两个非常经典的自动省略号 JS 库：Clamp.js 和 dotdotdot.js，轻量且强大，能完美覆盖单行、多行、HTML 内容截断等场景。

---

一、先了解：CSS 原生方案（基础场景首选）

在介绍 JS 库之前，先补充 CSS 原生方案，简单场景优先用 CSS，性能更好：

1. 单行省略（兼容性最好）

.single-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 强制不换行 */
}

2. 多行省略（现代浏览器支持）

.multi-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示行数 */
  overflow: hidden;
  text-overflow: ellipsis; /* 可选，部分浏览器需要 */
}

局限：仅支持 WebKit 内核浏览器（Chrome、Safari、Edge），Firefox 需配合 -moz-box，且无法自定义省略位置、添加“阅读更多”链接。

---

二、Clamp.js：超轻量无依赖的省略号库

Clamp.js 是一个无依赖、纯 JS 的轻量库，压缩后仅约 2.475 KB，专门用于截断 HTML 元素内容并添加省略号。

1. 核心特性

• ✅ 超轻量，无任何依赖
• ✅ 支持单行、多行、固定高度、自适应高度截断
• ✅ 支持自定义省略字符、添加“阅读更多”HTML
• ✅ 可选原生 -webkit-line-clamp 加速（WebKit 浏览器）
• ✅ 支持按句子/单词/字符智能截断，提升性能

2. 安装与引入

方式1：直接下载

从 GitHub 下载 clamp.min.js：https://github.com/josephschmitt/Clamp.js

方式2：CDN 引入（示例）

<script src="path/to/clamp.min.js"></script>

3. 快速上手

<div id="myHeader">这是一段很长很长很长很长很长很长很长很长的标题文本</div>
<div id="myParagraph">这是一段很长很长很长很长很长很长很长很长很长很长很长很长的段落内容，需要截断显示省略号。</div>

<script>
  // 1. 单行截断
  $clamp(document.getElementById('myHeader'), { clamp: 1 });

  // 2. 多行截断（显示3行）
  $clamp(document.getElementById('myParagraph'), { clamp: 3 });

  // 3. 自适应容器高度（需提前在 CSS 中设置元素固定高度）
  $clamp(document.getElementById('myParagraph'), { clamp: 'auto' });

  // 4. 固定高度截断（35px）
  $clamp(document.getElementById('myParagraph'), { clamp: '35px' });
</script>

4. 完整配置选项

选项	类型	说明	默认值
clamp	Number / String / ‘auto’	截断规则： - Number：显示行数 - String（如 ‘35px’）：固定高度 - ‘auto’：自适应容器 CSS 高度	-
useNativeClamp	Boolean	是否启用 WebKit 原生 -webkit-line-clamp（性能更好）	WebKit 浏览器默认 true，其他 false
truncationChar	String	截断后显示的字符	'…'（省略号）
truncationHTML	String	截断字符前插入的 HTML（如“阅读更多”链接）	undefined
splitOnChars	Array	智能截断的字符优先级（先按句子、再按单词、最后按字符），提升性能	['.', '-', '–', '—', ' ']
animate	Boolean	是否开启截断动画（彩蛋功能，逐个删除字符直到 fit）	false

5. 进阶示例：添加“阅读更多”链接

$clamp(document.getElementById('myParagraph'), {
  clamp: 3,
  truncationHTML: '<a href="#" style="color: #1890ff;"> 阅读更多</a>'
});

---

三、dotdotdot.js：功能强大的跨浏览器省略号插件

dotdotdot.js 是一个更强大的省略号插件，早期依赖 jQuery，现在也支持原生 JS，压缩后约 6.15 KB，专门处理多行 HTML 内容截断，响应式支持更好。

1. 核心特性

• ✅ 支持复杂 HTML 内容截断（自动处理标签闭合）
• ✅ 响应式：窗口大小变化时自动重新计算省略号
• ✅ 可保留“阅读更多”链接在省略号后
• ✅ 提供完整 API：截断、恢复、销毁、监听尺寸变化
• ✅ 支持按节点/单词/字符三种截断方式

2. 许可证说明

• 个人/非商业使用：免费
• 商业使用：需购买许可证（单网站 $5，多网站 $40）
• GitHub：https://github.com/BeSite/jQuery.dotdotdot
• 官网：http://dotdotdot.frebsite.nl

3. 安装与引入

方式1：NPM 安装

npm i dotdotdot-js

方式2：CDN 引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/4.1.0/dotdotdot.min.js"></script>

方式3：jQuery 版本（旧版兼容）

如果需要支持 IE 9/10，使用 legacy jQuery 版本（v3.2.3）。

4. 快速上手（原生 JS 版）

<div id="element-to-truncate" style="max-height: 100px; overflow: hidden;">
  <p>这是一段包含 <strong>HTML 标签</strong> 的很长很长很长很长很长很长很长很长很长很长的内容。</p>
  <p>第二段内容，也会被自动处理。</p>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    // 1. 获取要截断的元素
    const wrapper = document.querySelector("#element-to-truncate");

    // 2. 配置选项
    const options = {
      ellipsis: "… ", // 省略号字符
      truncate: "word", // 按单词截断
      watch: "window", // 监听窗口大小变化，自动更新
      callback: function(isTruncated) {
        console.log("是否被截断：", isTruncated);
      }
    };

    // 3. 初始化 dotdotdot
    const dot = new Dotdotdot(wrapper, options);
  });
</script>

5. 完整配置选项

选项	类型	说明	默认值
callback	Function	截断完成后的回调函数，参数 isTruncated 表示是否被截断	-
ellipsis	String	省略号字符	"\u2026 "（…）
height	Number / String / null	容器最大高度： - null：读取 CSS max-height - Number：像素值 - “watch”：持续监听高度	null
keep	String	选择器，指定省略号后要保留的元素（如“阅读更多”按钮）	null
tolerance	Number	高度计算的容差（像素）	0
truncate	String	截断方式："node"（按节点）/ "word"（按单词）/ "letter"（按字符）	"word"
watch	Boolean / String	是否监听尺寸变化： - true：监听容器尺寸 - “window”：监听窗口尺寸	"window"

6. 常用 API 方法

初始化后可通过 dot.API 调用方法：

const dot = new Dotdotdot(wrapper, options);

// 1. 重新执行截断
dot.API.truncate();

// 2. 恢复原始内容（取消截断）
dot.API.restore();

// 3. 完全销毁实例，恢复到初始状态
dot.API.destroy();

// 4. 开始监听尺寸变化
dot.API.watch();

// 5. 停止监听尺寸变化
dot.API.unwatch();

// 6. 获取类实例
dot.API.getInstance();

---

四、两个库对比与选择建议

对比项	Clamp.js	dotdotdot.js
体积	约 2.475 KB（更轻量）	约 6.15 KB
依赖	无	新版无依赖，旧版依赖 jQuery
HTML 内容支持	基础支持	强大（自动处理标签闭合）
响应式	需手动处理	原生支持（watch 选项）
API 完整性	简单配置	完整 API（截断/恢复/监听）
许可证	公共领域（完全免费）	非商业免费，商业需付费
适用场景	简单文本、单行/多行截断	复杂 HTML、响应式页面、需要“阅读更多”

选择建议

• 简单场景、追求极致轻量：选 Clamp.js（无依赖、免费、够用）
• 复杂 HTML 内容、响应式页面、需要完整 API：选 dotdotdot.js（功能更强大，体验更好）
• 现代浏览器、无特殊需求：优先用 CSS 原生方案（性能最好）

---

五、总结

自动省略号是网页开发中的高频需求，CSS 原生方案能解决大部分简单场景，而 Clamp.js 和 dotdotdot.js 则能覆盖更复杂的需求：

• Clamp.js 胜在轻量、无依赖、完全免费，适合基础文本截断；
• dotdotdot.js 胜在功能强大、HTML 支持好、响应式完善，适合复杂场景。

根据你的项目需求选择即可，两个库都是经过时间检验的经典工具，稳定可靠！