本文详细介绍了如何利用 `MultiClamp` 库在前端实现文本内容的智能折叠与展开功能。通过设置初始行数对文本进行截断，并在用户点击“阅读更多”按钮或文本块时，动态解除限制，展示完整内容。教程涵盖了 `MultiClamp` 的初始化、`reload` 方法的使用，以及结合事件监听实现交互的完整步骤，旨在提供一个清晰、实用的文本内容管理解决方案。
在现代网页设计中，为了优化用户体验和布局美观，经常需要对过长的文本内容进行截断，并提供“阅读更多”的选项供用户展开查看完整内容。MultiClamp 是一个轻量级的 JavaScript 库，能够帮助开发者轻松实现多行文本的截断与展开功能，兼容性良好，并支持自定义省略符。本教程将指导您如何结合 MultiClamp 和原生 JavaScript（或 jQuery）来实现这一交互。
1. 引入 MultiClamp 库
首先，确保您的项目中已经引入了 MultiClamp 库。您可以直接在 HTML 文件中通过 CDN 引入，或者通过 npm/yarn 安装后打包使用。本例中我们使用 CDN 引入。同时，由于原始问题中提到了 jQuery，我们也会引入 jQuery，尽管 MultiClamp 也可以完全独立于 jQuery 使用。
2. HTML 结构准备
为了演示文本折叠与展开功能，我们需要一个包含多个文本块的 HTML 结构。每个文本块应包含标题、描述内容以及一个“阅读更多”按钮。
请注意，每个可折叠的文本内容都放置在 div 元素中，并带有 descr 类。同时，每个文本块的容器（a 标签）将作为点击展开的触发区域。
3. CSS 样式定义
为了使页面布局和文本块样式更具可读性，我们需要添加一些基本的 CSS 样式。
* { margin: 0; padding: 0;}.container { max-width: 480px; margin: 10px auto; padding: 0; width: 100%;}.container:after,.container:before { display: table; content: " ";}.row { margin-bottom: 10px;}.row:after { content: ''; display: block; height: 0; clear: both;}.col { display: inline; float: left; margin: 0 5px; width: 100%; max-width: 150px; text-align: left;}a { color: #000000; text-decoration: none;}.wrap { position: relative; min-height: 100%; padding: 10px 10px 10px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: yellow;}h3 { margin-bottom: 10px;}.btn { margin-top: 10px; background-color: #000000; color: #ffffff; display: inline-block; padding: 5px 10px; cursor: pointer; /* 添加光标样式，提示可点击 */}
4. JavaScript 实现：初始化折叠与点击展开
现在，我们将使用 JavaScript 来实现文本的初始折叠和点击展开功能。
4.1 初始化文本折叠
首先，遍历所有 .descr 元素，并使用 MultiClamp 将它们折叠到三行。
// MultiClamp 库的源码（省略，已在顶部引入）// ... (此处为MultiClamp库的minified源码，实际使用时无需再次粘贴)// ...// 初始化 MultiClamp 实例document.querySelectorAll("#info .descr").forEach(el => { // 为每个 .descr 元素创建一个 MultiClamp 实例 let instance = new MultiClamp(el, { ellipsis: '...', // 省略符 clamp: 3 // 初始折叠到 3 行 }); // 将 MultiClamp 实例存储在元素的数据属性中，以便后续访问 el.multiClampInstance = instance;});
在上述代码中，我们遍历了所有具有 id=”info” 且类名为 descr 的元素，并为每个元素创建了一个 MultiClamp 实例。clamp: 3 参数指示库将文本截断为三行，并使用 ellipsis: ‘…’ 作为省略符。为了在后续的展开操作中能够访问到这个实例，我们将其存储在了 DOM 元素的自定义属性 multiClampInstance 中。
4.2 实现点击展开功能
MultiClamp 库提供了一个 reload(options) 方法，允许我们动态更改截断选项并重新应用。当 clamp 选项设置为一个非常大的数字时，它将有效地解除文本截断，显示所有内容。
我们将为每个文本块的父链接（a 标签）添加一个点击事件监听器。当用户点击时，我们将调用对应 MultiClamp 实例的 reload 方法，并设置一个足够大的 clamp 值（例如 40000），以确保显示所有文本。同时，我们将隐藏“阅读更多”按钮。
document.querySelectorAll("#info .descr").forEach(el => { // 获取之前存储的 MultiClamp 实例 let instance = el.multiClampInstance || new MultiClamp(el, { ellipsis: '...', clamp: 3 }); let a = el.closest('a'); // 获取最近的父级 元素 a.addEventListener('click', e => { e.preventDefault(); // 阻止链接的默认跳转行为 // 展开文本：将 clamp 设置为一个非常大的值 instance.reload({ clamp: 40000, useOriginalText: true }); // 隐藏“阅读更多”按钮 const readMoreBtn = a.querySelector('.btn'); if (readMoreBtn) { readMoreBtn.style.display = 'none'; } }, { once: true }); // 使用 { once: true } 确保事件只触发一次});
代码解析：
el.closest(‘a’): 找到当前 descr 元素最近的父级 标签，作为点击事件的触发器。e.preventDefault(): 阻止 标签的默认点击行为（例如跳转页面）。instance.reload({ clamp: 40000, useOriginalText: true }): 这是实现展开的关键。通过调用 reload 方法并传入一个非常大的 clamp 值，MultiClamp 会重新计算并显示所有文本。useOriginalText: true 确保在重新加载时使用原始未截断的文本。a.querySelector(‘.btn’).style.display = ‘none’: 展开后，隐藏“阅读更多”按钮，因为所有内容都已可见。{ once: true }: 这是一个事件监听器的选项，表示该事件监听器只会被调用一次。当文本展开后，再次点击同一区域将不再触发展开逻辑，避免不必要的重复操作。
5. 完整示例代码
将上述 HTML、CSS 和 JavaScript 片段整合到一起，即可得到一个完整的、可运行的示例。
HTML:
MultiClamp 文本折叠与展开教程 * { margin: 0; padding: 0; } .container { max-width: 480px; margin: 10px auto; padding: 0; width: 100%; } .container:after, .container:before { display: table; content: " "; } .row { margin-bottom: 10px; } .row:after { content: ''; display: block; height: 0; clear: both; } .col { display: inline; float: left; margin: 0 5px; width: 100%; max-width: 150px; text-align: left; } a { color: #000000; text-decoration: none; } .wrap { position: relative; min-height: 100%; padding: 10px 10px 10px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: yellow; } h3 { margin-bottom: 10px; } .btn { margin-top: 10px; background-color: #000000; color: #ffffff; display: inline-block; padding: 5px 10px; cursor: pointer; }// MultiClamp 库的源码（此处为minified源码，实际使用时无需再次粘贴） // "use strict";!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.MultiClamp=t.MultiClamp||e()}(this,function(){function a(t){return parseInt(t,10)}function l(t){return(t+"").replace(/[^d.]/g,"")-0}function h(t){return Math.round(100*t)/100}function m(t,e){return"textContent"in t?t.textContent=e:t.innerText=e}function o(t,e){return window.getComputedStyle?window.getComputedStyle(t,null).getPropertyValue(e):t.currentStyle.getAttribute(e.replace(/-(w)/g,function(t,e){return e.toUpperCase()}))}function c(t){var e=o(t,"height");return-1<e.indexOf("px")?l(e):h(l(t.clientHeight)-l(o(t,"padding-top"))-l(o(t,"padding-bottom")))}var t=function(t,e){t&&(this.element=t.length?t[0]:t,this.originalOption=e||{},this.originalElement=this.element.cloneNode(!0),this.preInit(this.originalOption),this.init())};return t.prototype={constructor:t,reload:function(t){if(t){if(t.useOriginalText&&(this.element.innerHTML=this.originalElement.innerHTML),"-webkit-box"===this.element.style.display)for(var e=["display","overflow","WebkitLineClamp","WebkitBoxOrient"],i=0;i<e.length;i++)this.element.style[e[i]]=this.originalElement.style[e[i]];var n={};for(var l in this.originalOption)n[l]=this.originalOption[l];for(var o in t)n[o]=t[o];this.preInit(n)}this.init()},preInit:function(t){if(this.option={ellipsis:"ellipsis"in t?t.ellipsis:"...",clamp:"clamp"in t?t.clamp:3,reverse:"reverse"in t&&!!t.reverse,splitByWords:"splitByWords"in t&&!!t.splitByWords,disableCssClamp:"disableCssClamp"in t&&!!t.disableCssClamp,onClampStart:"onClampStart"in t&&"function"==typeof t.onClampStart?t.onClampStart:function(){},onClampEnd:"onClampEnd"in t&&"function"==typeof t.onClampEnd?t.onClampEnd:function(){}},"lineTextLen"in t&&(this.option.lineTextLen=t.lineTextLen),"auto"===this.option.clamp)this.autoClamp=!0;else{if(this.option.clamp=a(this.option.clamp),isNaN(this.option.clamp)||this.option.clamp<1)throw new Error("Invaild clamp number!");this.autoClamp=!1}this.useCssClamp=!(this.option.disableCssClamp||this.autoClamp||this.option.reverse||this.option.splitByWords||"..."!==this.option.ellipsis||void 0===document.body.style.webkitLineClamp)},init:function(){if(this.useCssClamp){var t={display:"-webkit-box",overflow:"hidden",WebkitLineClamp:this.option.clamp,WebkitBoxOrient:"vertical"};for(var e in t)this.element.style[e]=t[e]}else this.contentText="textContent"in(i=this.element)?i.textContent:i.innerText,this.ellipsis=function(t){if(/^$/.test(t)){var e=document.createElement("div");return e.innerHTML=t,e.firstElementChild||e.firstChild}return t}(this.option.ellipsis),this.clamp();var i},getSingleLineHeight:function(){var t=o(this.element,"line-height"),i=this;if(-1<t.indexOf("px"))return l(t);if(isNaN(t))return n();var e=o(this.element,"font-size");return-1<e.indexOf("px")?h(l(e)*t):-1<e.indexOf("pt")?h(4*l(e)/3*t):n();function n(){var t=i.element.innerHTML;i.element.innerHTML=".";var e=c(i.element);return i.element.innerHTML=t,e}},clamp:function(){var t,e,i,n,l=this;if(t=this.getSingleLineHeight(),""!==this.contentText&&t){if(this.autoClamp?(i=c(this.element),this.option.clamp=a(i/t),n=this.element.style.height,this.element.style.height="auto"):i=h(t*this.option.clamp),!(e=c(this.element))||!i||e<=i)return this.autoClamp&&(this.element.style.height=n
以上就是使用 MultiClamp 实现文本块的智能折叠与展开的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1588141.html
微信扫一扫 
支付宝扫一扫 
