登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > MultiClamp文本折叠展开技巧详解

MultiClamp文本折叠展开技巧详解

2025-10-28 12:27:34 0浏览 收藏

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《MultiClamp文本块智能折叠展开技巧》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

使用 MultiClamp 实现文本块的智能折叠与展开

本文详细介绍了如何利用 `MultiClamp` 库在前端实现文本内容的智能折叠与展开功能。通过设置初始行数对文本进行截断，并在用户点击“阅读更多”按钮或文本块时，动态解除限制，展示完整内容。教程涵盖了 `MultiClamp` 的初始化、`reload` 方法的使用，以及结合事件监听实现交互的完整步骤，旨在提供一个清晰、实用的文本内容管理解决方案。

在现代网页设计中，为了优化用户体验和布局美观，经常需要对过长的文本内容进行截断，并提供“阅读更多”的选项供用户展开查看完整内容。MultiClamp 是一个轻量级的 JavaScript 库，能够帮助开发者轻松实现多行文本的截断与展开功能，兼容性良好，并支持自定义省略符。本教程将指导您如何结合 MultiClamp 和原生 JavaScript（或 jQuery）来实现这一交互。

1. 引入 MultiClamp 库

首先，确保您的项目中已经引入了 MultiClamp 库。您可以直接在 HTML 文件中通过 CDN 引入，或者通过 npm/yarn 安装后打包使用。本例中我们使用 CDN 引入。同时，由于原始问题中提到了 jQuery，我们也会引入 jQuery，尽管 MultiClamp 也可以完全独立于 jQuery 使用。

<!-- 引入 jQuery (如果需要) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 引入 MultiClamp 库 -->
<script src="https://unpkg.com/multi-clamp@1.0.1/multi-clamp.min.js"></script>

2. HTML 结构准备

为了演示文本折叠与展开功能，我们需要一个包含多个文本块的 HTML 结构。每个文本块应包含标题、描述内容以及一个“阅读更多”按钮。

<div id="info" class="container">
  <div class="row">
    <!-- 示例文本块 1 -->
    <div class="col">
      <a href="#">
        <div class="wrap">
          <h3>Heading 1</h3>
          <div class="descr">
            Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur<br /> Suspendisse eget nulla lobortis<br /> Proin vel quam ornare, commodo sem<br /> Suspendisse luctus nisi nec<br /> Nullam volutpat mi ut metus
            rutrum<br /> Fusce vehicula ipsum in mauris<br /> Suspendisse consequat leo
          </div>
          <div class="btn">
            Read More
          </div>
        </div>
      </a>
    </div>
    <!-- 示例文本块 2 -->
    <div class="col">
      <a href="#">
        <div class="wrap">
          <h3>Heading 2</h3>
          <div class="descr">
            Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur<br /> Suspendisse eget nulla lobortis
          </div>
          <div class="btn">
            Read More
          </div>
        </div>
      </a>
    </div>
    <!-- 更多文本块... -->
  </div>
</div>

请注意，每个可折叠的文本内容都放置在 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> 元素
    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 } 确保事件只触发一次
});

代码解析：

5. 完整示例代码

将上述 HTML、CSS 和 JavaScript 片段整合到一起，即可得到一个完整的、可运行的示例。

HTML:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MultiClamp 文本折叠与展开教程</title>
    <!-- 引入 CSS 样式 -->
    <style>
        * {
            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;
        }
    </style>
</head>
<body>

    <div id="info" class="container">
        <div class="row">
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>Heading 1</h3>
                        <div class="descr">
                            Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur<br /> Suspendisse eget nulla lobortis<br /> Proin vel quam ornare, commodo sem<br /> Suspendisse luctus nisi nec<br /> Nullam volutpat mi ut metus
                            rutrum<br /> Fusce vehicula ipsum in mauris<br /> Suspendisse consequat leo
                        </div>
                        <div class="btn">
                            Read More
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>Heading 2</h3>
                        <div class="descr">
                            Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur<br /> Suspendisse eget nulla lobortis
                        </div>
                        <div class="btn">
                            Read More
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>Heading 3</h3>
                        <div class="descr">
                            Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur<br /> Suspendisse eget nulla lobortis<br /> Proin vel quam ornare, commodo sem<br /> Suspendisse luctus nisi nec<br /> Nullam volutpat mi ut metus
                            rutrum<br /> Fusce vehicula ipsum in mauris
                        </div>
                        <div class="btn">
                            Read More
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>Heading 4</h3>
                        <div class="descr">
                            Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur<br /> Suspendisse eget nulla lobortis<br /> Proin vel quam ornare, commodo sem
                        </div>
                        <div class="btn">
                            Read More
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>Heading 5</h3>
                        <div class="descr">
                            Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur<br /> Suspendisse eget nulla lobortis<br /> Proin vel quam ornare, commodo sem<br /> Suspendisse luctus nisi nec<br /> Nullam volutpat mi ut metus
                            rutrum<br /> Fusce vehicula ipsum in mauris
                        </div>
                        <div class="btn">
                            Read More
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>Heading 6</h3>
                        <div class="descr">
                            Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur
                        </div>
                        <div class="btn">
                            Read More
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!-- 引入 jQuery (如果需要) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- 引入 MultiClamp 库 -->
    <script src="https://unpkg.com/multi-clamp@1.0.1/multi-clamp.min.js"></script>

    <script>
        // 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(/^<[\w\W]+>$/.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文本折叠展开技巧详解》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

高德鹰眼预警能临时关闭吗？高德鹰眼预警能临时关闭吗？
上一篇
高德鹰眼预警能临时关闭吗？
电脑开机提示“diskreaderror”怎么处理
下一篇
电脑开机提示“diskreaderror”怎么处理
查看更多
最新文章
查看更多
课程推荐
  • 前端进阶之JavaScript设计模式
    前端进阶之JavaScript设计模式
    设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
    543次学习
  • GO语言核心编程课程
    GO语言核心编程课程
    本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
    516次学习
  • 简单聊聊mysql8与网络通信
    简单聊聊mysql8与网络通信
    如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
    500次学习
  • JavaScript正则表达式基础与实战
    JavaScript正则表达式基础与实战
    在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
    487次学习
  • 从零制作响应式网站—Grid布局
    从零制作响应式网站—Grid布局
    本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
    485次学习
查看更多
AI推荐
  • ChatExcel酷表：告别Excel难题，北大团队AI助手助您轻松处理数据
    ChatExcel酷表
    ChatExcel酷表是由北京大学团队打造的Excel聊天机器人，用自然语言操控表格，简化数据处理，告别繁琐操作，提升工作效率！适用于学生、上班族及政府人员。
    3193次使用
  • Any绘本：开源免费AI绘本创作工具深度解析
    Any绘本
    探索Any绘本（anypicturebook.com/zh），一款开源免费的AI绘本创作工具，基于Google Gemini与Flux AI模型，让您轻松创作个性化绘本。适用于家庭、教育、创作等多种场景，零门槛，高自由度，技术透明，本地可控。
    3405次使用
  • 可赞AI：AI驱动办公可视化智能工具，一键高效生成文档图表脑图
    可赞AI
    可赞AI，AI驱动的办公可视化智能工具，助您轻松实现文本与可视化元素高效转化。无论是智能文档生成、多格式文本解析，还是一键生成专业图表、脑图、知识卡片，可赞AI都能让信息处理更清晰高效。覆盖数据汇报、会议纪要、内容营销等全场景，大幅提升办公效率，降低专业门槛，是您提升工作效率的得力助手。
    3436次使用
  • 星月写作：AI网文创作神器，助力爆款小说速成
    星月写作
    星月写作是国内首款聚焦中文网络小说创作的AI辅助工具，解决网文作者从构思到变现的全流程痛点。AI扫榜、专属模板、全链路适配，助力新人快速上手，资深作者效率倍增。
    4543次使用
  • MagicLight.ai：叙事驱动AI动画视频创作平台 | 高效生成专业级故事动画
    MagicLight
    MagicLight.ai是全球首款叙事驱动型AI动画视频创作平台，专注于解决从故事想法到完整动画的全流程痛点。它通过自研AI模型，保障角色、风格、场景高度一致性，让零动画经验者也能高效产出专业级叙事内容。广泛适用于独立创作者、动画工作室、教育机构及企业营销，助您轻松实现创意落地与商业化。
    3814次使用
查看更多
相关文章
关于我们 免责声明 意见反馈 联系我们 内容提交
Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！
技术交流群
Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 苏ICP备2023003363号-1
  • Golang学习网
    关注公众号
    Golang学习网
微信登录更方便
  • 密码登录
  • 注册账号
忘记密码
登录即同意 用户协议 和 隐私政策
返回登录
  • 重置密码
发送验证码