使用 MultiClamp 实现文本块的折叠与展开功能-html教程-PHP中文网

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

本文详细介绍了如何利用 `multiclamp` 库在网页中实现文本内容的折叠与展开功能。通过初始化 `multiclamp` 实例对文本进行多行截断，并结合其 `reload` 方法，实现点击“阅读更多”按钮或文本块本身时，动态地将折叠文本完全展开，从而提升用户体验和页面布局的灵活性。

引言

在现代网页设计中，为了优化页面布局和提高内容的可读性，常常需要对较长的文本内容进行截断显示，仅展示部分内容，并通过“阅读更多”等交互元素提供展开完整文本的功能。MultiClamp 是一个轻量级的 JavaScript 库，它能帮助开发者轻松实现文本的多行截断，并提供了灵活的 API 来动态控制文本的折叠与展开状态。本教程将指导您如何使用 MultiClamp 实现这一常见的 UI 交互。

准备工作

首先，我们需要在项目中引入 MultiClamp 库和 jQuery（如果您的项目依赖 jQuery，虽然本教程的展开部分将使用原生 JavaScript）。您可以通过 CDN 引入这些库。

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="info" class="container">
        <div class="row">
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>标题 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">
                            阅读更多
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>标题 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">
                            阅读更多
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>标题 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">
                            阅读更多
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <!-- 更多 .row 和 .col 结构可以按需添加 -->
    </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/dist/multi-clamp.js"></script>
    <!-- 您的自定义脚本 -->
    <script src="script.js"></script>
</body>
</html>

登录后复制

接下来是基本的 CSS 样式，用于布局和美化文本块：

/* style.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; /* 添加光标指示可点击 */
}

登录后复制

实现文本块的初始折叠

在页面加载时，我们需要使用 MultiClamp 对所有目标文本块（例如 .descr 类）进行初始折叠。这里我们将文本限制为 3 行。

在 script.js 中添加以下代码：

// script.js
document.querySelectorAll("#info .descr").forEach(el => {
    // 初始化 MultiClamp 实例，将文本限制为 3 行
    let instance = new MultiClamp(el, {
        ellipsis: '...', // 省略号样式
        clamp: 3         // 限制行数
    });

    // 将实例存储在元素的 dataset 中，以便后续访问
    el.dataset.multiClampInstance = instance;
});

登录后复制

上述代码遍历了所有 .descr 元素，并为每个元素创建了一个 MultiClamp 实例，将其内容截断为 3 行。

实现点击展开功能

要实现点击展开功能，我们需要为每个文本块及其“阅读更多”按钮添加点击事件监听器。当用户点击时，我们将调用 MultiClamp 实例的 reload() 方法，并设置一个非常大的 clamp 值来模拟完全展开，同时隐藏“阅读更多”按钮。

修改 script.js，添加事件监听逻辑：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

// script.js
document.querySelectorAll("#info .descr").forEach(el => {
    // 初始化 MultiClamp 实例，将文本限制为 3 行
    let instance = new MultiClamp(el, {
        ellipsis: '...', // 省略号样式
        clamp: 3         // 限制行数
    });

    // 获取包含 .descr 和 .btn 的父级链接元素
    let parentLink = el.closest('a');
    let readMoreBtn = parentLink.querySelector('.btn');

    // 为父级链接元素添加点击事件监听器
    parentLink.addEventListener('click', e => {
        // 阻止链接的默认跳转行为
        e.preventDefault();

        // 展开文本：调用 reload 方法，设置一个非常大的 clamp 值
        // 这里的 40000 只是一个足够大的数字，确保文本能完全展开
        instance.reload({ clamp: 40000 });

        // 隐藏“阅读更多”按钮
        if (readMoreBtn) {
            readMoreBtn.style.display = 'none';
        }

        // 移除事件监听器，确保只展开一次
        // 如果需要再次折叠功能，则不能使用 { once: true }，需要更复杂的逻辑
    }, { once: true }); // { once: true } 选项确保事件只触发一次
});

登录后复制

代码解析：

el.closest('a'): 找到当前 .descr 元素最近的 <a> 祖先元素，因为点击区域是整个链接。
e.preventDefault(): 阻止 <a> 标签的默认跳转行为，确保点击只触发展开逻辑。
instance.reload({ clamp: 40000 }): 这是实现展开的关键。MultiClamp 的 reload() 方法允许您在运行时更改其选项。通过设置一个足够大的 clamp 值（例如 40000），可以有效地让文本显示其全部内容。
readMoreBtn.style.display = 'none': 展开后，通常会隐藏“阅读更多”按钮，因为它已不再需要。
{ once: true }: 这是一个可选的事件监听器选项，表示该事件监听器在触发一次后会自动移除。这意味着一旦文本展开，再次点击将不再触发相同的展开逻辑。如果您需要实现展开/折叠的切换功能，则不应使用此选项，而需要更复杂的逻辑来切换 clamp 值和按钮文本。

完整代码示例

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

index.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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="info" class="container">
        <div class="row">
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>标题 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">
                            阅读更多
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>标题 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">
                            阅读更多
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>标题 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">
                            阅读更多
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>标题 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">
                            阅读更多
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>标题 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">
                            阅读更多
                        </div>
                    </div>
                </a>
            </div>
            <div class="col">
                <a href="#">
                    <div class="wrap">
                        <h3>标题 6</h3>
                        <div class="descr">
                            Lorem ipsum dolor sit amet<br /> Morbi hendrerit justo non<br /> Mauris et ligula efficitur
                        </div>
                        <div class="btn">
                            阅读更多
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://unpkg.com/multi-clamp/dist/multi-clamp.js"></script>
    <script src="script.js"></script>
</body>
</html>

登录后复制

style.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;
}

登录后复制

script.js

document.querySelectorAll("#info .descr").forEach(el => {
    let instance = new MultiClamp(el, {
        ellipsis: '...',
        clamp: 3
    });

    let parentLink = el.closest('a');
    let readMoreBtn = parentLink.querySelector('.btn');

    parentLink.addEventListener('click', e => {
        e.preventDefault();
        instance.reload({ clamp: 40000 }); // 使用一个足够大的值来展开
        if (readMoreBtn) {
            readMoreBtn.style.display = 'none'; // 隐藏按钮
        }
    }, { once: true });
});

登录后复制

注意事项

clamp 值选择: 在展开时，clamp 值设置为 40000 只是一个经验值，确保它远大于任何可能的文本行数。理论上，只要这个值足够大，文本就会完全展开。
重复折叠/展开: 如果您需要实现点击按钮在“折叠”和“展开”之间切换的功能，则不能使用 { once: true } 选项。您需要维护一个状态（例如，一个布尔变量或一个 CSS 类）来跟踪当前文本是折叠还是展开状态，并根据状态在 instance.reload({ clamp: 3 }) 和 instance.reload({ clamp: 40000 }) 之间切换，同时更新按钮的文本和可见性。
useOriginalText 选项: MultiClamp 的 reload 方法还支持 useOriginalText: true 选项。如果文本内容在折叠后被修改了，并且您希望在展开时恢复到最初的完整文本，这个选项会很有用。在我们的例子中，MultiClamp 内部会保留原始文本，因此通常不需要显式设置此选项。
性能: 对于页面上大量的文本块，每次实例化 MultiClamp 都会消耗一定的资源。但对于常见的几十个或几百个文本块，其性能影响通常可以忽略不计。