使用原生 JavaScript 实现小程序多行文本“全文收起”功能

前端

2023-12-14 13:52:10

在小程序开发中，经常需要实现多行文本“全文收起”功能。尽管掘金上有一些使用纯 CSS 实现的方法，但经测试发现，此类方法在 iOS 上表现完美，但在 Android 设备上却无效。

本文将介绍一种使用原生 JavaScript 实现该功能的方法，该方法在 iOS 和 Android 设备上均可正常工作。我们首先需要了解原生 JavaScript 如何处理文本溢出。

文本溢出

当文本内容超出其容器的宽度时，就会发生文本溢出。默认情况下，浏览器会隐藏溢出的文本并使用省略号 (...) 表示。要控制文本溢出，我们可以使用 CSS 属性 text-overflow。

text-overflow 属性有以下值：

clip: 隐藏溢出文本。
ellipsis: 用省略号 (...) 表示溢出文本。

要实现“全文收起”功能，我们需要使用 JavaScript 动态计算文本高度，并根据高度决定是否显示“全文收起”按钮。

实现步骤

获取文本元素

首先，我们需要获取需要实现“全文收起”功能的文本元素。我们可以使用 getElementById() 方法：
```
const textElement = document.getElementById('text');
```
计算文本高度

接下来，我们需要计算文本高度。我们可以使用 offsetHeight 属性：
```
const textHeight = textElement.offsetHeight;
```
设置最大高度

为了防止文本溢出，我们需要设置文本的最大高度。我们可以使用 style.maxHeight 属性：
```
textElement.style.maxHeight = '100px';
```
这里，我们将文本的最大高度设置为 100 像素。您可以根据需要调整此值。
添加“全文收起”按钮

现在，我们需要添加一个“全文收起”按钮。我们可以使用以下 HTML 代码：
```
<button id="toggle-button">全文收起</button>
```

监听按钮点击事件

接下来，我们需要监听“全文收起”按钮的点击事件：

const toggleButton = document.getElementById('toggle-button');

toggleButton.addEventListener('click', () => {
  // ...
});

切换文本高度

在点击事件处理程序中，我们需要切换文本高度：

if (textElement.style.maxHeight) {
  // 已收起，展开
  textElement.style.maxHeight = null;
  toggleButton.textContent = '全文收起';
} else {
  // 已展开，收起
  textElement.style.maxHeight = '100px';
  toggleButton.textContent = '展开';
}

完整代码示例

const textElement = document.getElementById('text');
const textHeight = textElement.offsetHeight;
textElement.style.maxHeight = '100px';

const toggleButton = document.getElementById('toggle-button');

toggleButton.addEventListener('click', () => {
  if (textElement.style.maxHeight) {
    // 已收起，展开
    textElement.style.maxHeight = null;
    toggleButton.textContent = '全文收起';
  } else {
    // 已展开，收起
    textElement.style.maxHeight = '100px';
    toggleButton.textContent = '展开';
  }
});