前言
在前端开发中经常需要对文本进行截断，但是直接使用 text-overflow: ellipsis 只能简单地实现省略号显示，不能灵活地设置截断位置。为了解决这个问题，可以使用 clamp.js 这个 npm 包。
clamp.js 可以让我们轻松地控制截断位置，并且可以根据屏幕大小动态调整截断位置，保证显示效果的稳定性和一致性。
安装和使用
使用 clamp.js 前需要先安装该 npm 包，可以使用以下命令进行安装：
npm install clamp-js
安装完成后，就可以开始使用了。具体使用方法如下：
-- -------------------- ---- ------- -- -- -------- ------ ----- ---- ----------- -- --------- ----- ------ - ---------------------------------- -- ------- ----- ------- - - ------ - -- -- -- ----- -- ------------- ---------
以上代码中，首先使用 import 语句导入了 clamp.js，然后通过 document.querySelector 方法获取了需要进行截断的元素。接着，我们设置了 options 对象中的 clamp 属性为 2，表示最多只显示两行内容。最后，调用 clamp(target, options) 方法即可实现内容的截断。
除了设置 clamp 属性，还可以设置 useNativeClamp 属性，用来控制是否使用原生的 clamp 实现。还可以设置 truncationChar 属性，用来设置截断时用于代替省略号的字符。
动态调整截断位置
通过 clamp.js，我们可以在不同屏幕大小下自动调整截断位置，以保证显示效果的稳定性和一致性。具体实现方法如下：
-- -------------------- ---- -------
-------- ------------- -
-- ---------
----- ------ - ----------------------------------
-- --------
----- ---------- - ------------------------------------------------
-- ------
----- --------------- - --------------------
-- ------
----- -------- - -------------------------- - ------------
-- -------
----- ------- - -
------ --------
--
-- -- ----- --
------------- ---------
-
-- ----------
--------------------------------- -------------
-- --------
--------------以上代码中，我们通过 window.addEventListener 方法监听了窗口大小变化事件。每当窗口大小发生变化时，就会自动调用 updateClamp 方法，重新计算每行高度和最大行数，并且动态设置截断位置。
示例代码
下面是一个完整的示例代码，用来展示如何使用 clamp.js 在不同屏幕大小下自动调整截断位置。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ------------
-------
---------- -
------ ----
------- -----
-
------- -
---------- -----
------------ ----
------------ ---------
-
--------
-------
------
---- ------------------
---- -------------------- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- -------------
------
------- ---------------------------------------------------------
--------
-------- ------------- -
----- ------ - ----------------------------------
----- ---------- - ------------------------------------------------
----- --------------- - --------------------
----- -------- - -------------------------- - ------------
----- ------- - -
------ ---------
--------------- ------
--------------- -----
--
------------- ---------
-
--------------------------------- -------------
--------------
---------
-------
-------总结
通过本文的介绍，我们学习了 clamp.js 的基本用法，并且掌握了如何动态调整截断位置以适应不同屏幕大小的需求。在实际开发中，我们可以灵活地运用这些技巧来实现各种复杂的文本截断需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc40b5cbfe1ea0612719