在前端开发中，经常会遇到需要在页面元素中限制文字的长度并加上省略号的情况，这时候我们就可以使用 npm 包 ellipses 来解决问题。本篇文章将介绍 ellipses 的基本使用方法以及一些高级用法。
安装
在开始使用 ellipses 之前，我们需要先安装它。在终端中输入以下命令：
npm install ellipses
基本用法
设置元素的最大宽度
我们需要先给要显示的元素设置一个最大宽度，然后将 ellipses 包裹在元素中即可。示例代码如下：
<div style="width: 200px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum at quam.
</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque velit nisi, pretium ut lacinia in, elementum at quam.
</p>
</div>需要注意的是，在设置元素宽度时，不能将其设置为百分数。而应该使用像素数值。
引入样式表
在示例代码中，我们给 p 元素添加了一个 class 名为 ellipsis，这个 class 并不是 ellipses 包内置的，而是我们需要自己在样式表中定义的。在我们的项目中，我们需要引入 ellipses 包中的样式表。在 HTML 文件中，可以这样引入：
<link rel="stylesheet" href="../node_modules/ellipses/dist/index.css">
如果使用了打包工具（如 webpack），也可以在样式表中通过 import 引入：
@import "~ellipses/dist/index.css";
定义 ellipsis 类
打开样式表文件，我们来定义 ellipsis 类。这个类是用来实现文字长度限制和加上省略号的样式。
.ellipsis {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}具体来说，我们让元素的 display 属性为 inline-block，这样它就可以限制宽度并且可以在一行内显示。然后，我们将 white-space 属性设为 nowrap，这样文字就不会自动换行。overflow 属性设置为 hidden，在文字超出宽度的时候隐藏超出部分。最后，我们使用 text-overflow 属性来定义省略号的样式。
注意：实际使用中，我们并不需要亲手定义 ellipsis 类，而是可以直接使用 npm 包中的样式表。
高级用法
对中文字设置省略号
如果在一个包含中文的字符串中使用 ellipses，可能会遇到问题：每个中文字占用的宽度并不相同，如果直接使用设置宽度和 ellipsis 的方法，可能造成文字长度不准确，从而影响省略号的显示效果。我们可以使用一个叫做 ellipses-edge 的包来解决这个问题。
安装 ellipses-edge
在终端中输入以下命令：
npm install ellipses-edge
使用
与 ellipses 不同，使用 ellipses-edge 是需要调用一个 JavaScript 函数的。
<p id="p1">文子曰：“好勇者不怕远，智者不怕荒。”</p>
<script>
import { ellipses } from 'ellipses-edge';
ellipses('#p1', { maxLength: 10 });
</script>我们调用了 ellipses-edge 中的 ellipses 函数，将需要截断并加省略号的元素的 id 传给它，然后再传入一个包含一些配置信息的参数对象。这里，我们使用 maxLength 字段来定义最大字符长度，类似于 ellipses 中设置元素宽度的方式。
对多个元素进行批量处理
如果我们需要对整个项目中的所有元素均应用 ellipses，一个一个倒腾显然不太切实际。这时候，我们可以使用一些工具函数来帮助我们批量处理。
在下面这个示例中，我们使用了 jQuery 和 ellipses 包自带的一个名为 ell 的函数来实现批量处理。
-- -------------------- ---- -------
---- -------------
-------- ----- ----- --- ----- ----------- ---------- ---------
---------- ----- ----- ------- -- ------- --- --------- -- ---------
------
---- -------------
-------- ------------ -------- --------------
--------------- -- ----- -- ---- ----- ------------
------
--------
--------------------------
---------- --
---
---------在这个示例中，我们需要对具有 item 类的元素中的所有 p 元素进行处理。我们使用和上文相似的 ellipses 函数，只是这里使用了一个 jQuery 的选择器找到了所有符合条件的元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055feb81e8991b448dda8c