前言
在前端开发中，文字的处理是非常重要的一部分， 特别是在处理文本超出预定长度时。 长文本会破坏排版的美感，甚至会导致界面错乱。因此，我们需要一种方法来截断长文本，让其在一定范围内显示完整且美观。这时候，ellipsizer 就成为了一种非常不错的解决方案。
什么是 ellipsizer？
ellipsizer 是一个npm包， 它能够美观地截断长文本，并以省略号（...）表示截断的文本。 这个幸运的包使用el.addEventListener监听文本变化，然后使用 DOM原生API来截断文本。它不依赖于任何库，也不需要引入其他第三方库，使用轻量级，性能优越。
如何使用 ellipsizer?
使用 ellipsizer 相当简单。 先通过npm安装ellepsizer包。
$ npm i ellipsizer
然后在需要截断文本的地方引入包，并实例化ellipsizer。
import Ellipsizer from 'ellipsizer'; const ellipsizer = new Ellipsizer();
使用 ellipsizer 可以非常容易的截取我们指定的大小的文本，使其能够在一定范围内完整显示，并以省略号结尾。
-- -------------------- ---- ------- --- - ------------------- ---------- ------- - ------ -------- ------- ------- - ------ -------- --------- ------ - ------ -------- ------ ----- ----------- - ------- -------- --------- --- ----- ------- - ------------------------------------------------- ----- --------- - --- ----- ------ - - ----- ----- ---------------- - ---------------------------- ---------- -------- ------------------------------ -- -----------------
拓展思路
除了上述简单的使用之外，ellipsizer 还有着更多使用的方法。 我们可以自定义ellipsizer 的使用效果， 比如style、viewport、container、done等等方式来控制文本的截取效果。例如下面这个例子：
-- -------------------- ---- -------
----- ------ - ------
----- ---------- - --- -------------
----- ------- - -----------------------------------
----- -------------- - --------------------------------------
----- ----------------- - ---------------------------------------------
------------------------------------------ -
------ -
----------- --------
--------- -------
----------- -------
--
--------- -
------ --
------ ---------------
--
---------- ------------------
------ ---- -- -
----------------------------
-
---总结
通过本次文章，我们介绍了ellipsizer 和它的简单使用方式，并且通过拓展使其更加实用。希望这对你在前端开发中处理文本超出范围等问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557df81e8991b448d4edf