在前端开发中，经常会遇到需要在页面元素中限制文字的长度并加上省略号的情况，这时候我们就可以使用 npm 包 ellipses 来解决问题。本篇文章将介绍 ellipses 的基本使用方法以及一些高级用法。
安装
在开始使用 ellipses 之前，我们需要先安装它。在终端中输入以下命令：
--- ------- --------
基本用法
设置元素的最大宽度
我们需要先给要显示的元素设置一个最大宽度，然后将 ellipses 包裹在元素中即可。示例代码如下：
---- ------------- --------
---
----- ----- ----- --- ----- ----------- ---------- ----- ------- ----- ----- ------- -- ------- --- --------- -- -----
----
-- -----------------
----- ----- ----- --- ----- ----------- ---------- ----- ------- ----- ----- ------- -- ------- --- --------- -- -----
----
------需要注意的是，在设置元素宽度时，不能将其设置为百分数。而应该使用像素数值。
引入样式表
在示例代码中，我们给 p 元素添加了一个 class 名为 ellipsis，这个 class 并不是 ellipses 包内置的，而是我们需要自己在样式表中定义的。在我们的项目中，我们需要引入 ellipses 包中的样式表。在 HTML 文件中，可以这样引入：
----- ---------------- -----------------------------------------------
如果使用了打包工具（如 webpack），也可以在样式表中通过 import 引入：
------- ---------------------------
定义 ellipsis 类
打开样式表文件，我们来定义 ellipsis 类。这个类是用来实现文字长度限制和加上省略号的样式。
--------- - -------- ------------- ------------ ------- --------- ------- -------------- --------- -
具体来说，我们让元素的 display 属性为 inline-block，这样它就可以限制宽度并且可以在一行内显示。然后，我们将 white-space 属性设为 nowrap，这样文字就不会自动换行。overflow 属性设置为 hidden，在文字超出宽度的时候隐藏超出部分。最后，我们使用 text-overflow 属性来定义省略号的样式。
注意：实际使用中，我们并不需要亲手定义 ellipsis 类，而是可以直接使用 npm 包中的样式表。
高级用法
对中文字设置省略号
如果在一个包含中文的字符串中使用 ellipses，可能会遇到问题：每个中文字占用的宽度并不相同，如果直接使用设置宽度和 ellipsis 的方法，可能造成文字长度不准确，从而影响省略号的显示效果。我们可以使用一个叫做 ellipses-edge 的包来解决这个问题。
安装 ellipses-edge
在终端中输入以下命令：
--- ------- -------------
使用
与 ellipses 不同，使用 ellipses-edge 是需要调用一个 JavaScript 函数的。
-- ------------------------------- -------- ------ - -------- - ---- ---------------- --------------- - ---------- -- --- ---------
我们调用了 ellipses-edge 中的 ellipses 函数，将需要截断并加省略号的元素的 id 传给它，然后再传入一个包含一些配置信息的参数对象。这里，我们使用 maxLength 字段来定义最大字符长度，类似于 ellipses 中设置元素宽度的方式。
对多个元素进行批量处理
如果我们需要对整个项目中的所有元素均应用 ellipses，一个一个倒腾显然不太切实际。这时候，我们可以使用一些工具函数来帮助我们批量处理。
在下面这个示例中，我们使用了 jQuery 和 ellipses 包自带的一个名为 ell 的函数来实现批量处理。
---- -------------
-------- ----- ----- --- ----- ----------- ---------- ---------
---------- ----- ----- ------- -- ------- --- --------- -- ---------
------
---- -------------
-------- ------------ -------- --------------
--------------- -- ----- -- ---- ----- ------------
------
--------
--------------------------
---------- --
---
---------在这个示例中，我们需要对具有 item 类的元素中的所有 p 元素进行处理。我们使用和上文相似的 ellipses 函数，只是这里使用了一个 jQuery 的选择器找到了所有符合条件的元素。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055feb81e8991b448dda8c