使用 JavaScript 动态截断字符串以适应容器宽度

本文介绍如何使用 JavaScript 动态截断字符串，使其适应不同宽度的容器。核心思想是：保留字符串的首尾部分，用省略号（...）代替中间部分，并根据容器的实际宽度动态调整省略号的数量，从而确保文本内容不会超出容器边界。本文提供详细的代码示例和解释，帮助开发者轻松实现这一功能。

动态截断字符串的 JavaScript 实现

以下是一个 JavaScript 函数，可以根据容器的宽度动态截断字符串：

function truncateText(container) {
  const text = container.innerText;
  const containerWidth = container.clientWidth;
  const words = text.split(' ');
  let truncatedText = '';

  for (let i = 0; i < words.length; i++) {
    const tempText = truncatedText + ' ' + words[i];
    container.innerText = tempText + '...';
    if (container.scrollWidth > containerWidth) {
      container.innerText = truncatedText + '...';
      break;
    }
    truncatedText = tempText;
  }
}

// 示例用法：
truncateText(document.getElementById('container'));

代码解释：

1. truncateText(container) 函数: 接收一个 HTML 元素作为参数，该元素包含需要截断的文本。
2. const text = container.innerText;: 获取容器内的文本内容。
3. const containerWidth = container.clientWidth;: 获取容器的实际宽度。
4. const words = text.split(' ');: 将文本内容分割成单词数组。
5. let truncatedText = '';: 初始化一个空字符串，用于存储截断后的文本。
6. for 循环: 遍历单词数组，逐步构建截断后的文本。
7. const tempText = truncatedText + ' ' + words[i];: 将当前单词添加到 truncatedText 中。
8. container.innerText = tempText + '...';: 将 tempText 加上省略号后，临时设置到容器的文本内容中。
9. if (container.scrollWidth > containerWidth): 检查容器的滚动宽度是否超过了容器的实际宽度。如果超过，则说明文本内容超出了容器边界。
10. container.innerText = truncatedText + '...';: 如果文本内容超出容器边界，则将 truncatedText 加上省略号后，最终设置到容器的文本内容中。
11. break;: 结束循环。

CSS 样式

为了使截断后的文本正确显示，需要设置一些 CSS 样式：

立即学习“Java免费学习笔记（深入）”；

Bandy AI

全球领先的电商设计Agent

下载

#container {
  width: 220px; /* 设置容器宽度 */
  white-space: nowrap; /* 禁止文本换行 */
  overflow-wrap: break-word; /* 允许单词在必要时断开 */
}

样式解释：

• width: 设置容器的宽度，根据实际需要调整。
• white-space: nowrap;: 禁止文本换行，确保文本内容在一行显示。
• overflow-wrap: break-word;: 允许单词在必要时断开，防止单个过长的单词超出容器边界。

HTML 结构

以下是一个简单的 HTML 结构，用于测试截断字符串的功能：

  content content content content content content content content content

注意事项：

• 确保容器的 id 与 JavaScript 代码中使用的 document.getElementById('container') 一致。
• 根据实际需要调整容器的宽度。
• white-space: nowrap; 和 overflow-wrap: break-word; 的组合使用可以有效地控制文本的显示方式，防止文本超出容器边界。

总结

本文介绍了一种使用 JavaScript 动态截断字符串的方法，可以根据容器的宽度自动调整省略号的数量，确保文本内容不会超出容器边界。通过结合 JavaScript 代码和 CSS 样式，可以轻松实现这一功能，提升用户体验。开发者可以根据实际需求，对代码进行修改和扩展，以满足不同的应用场景。例如，可以根据字符串的长度和容器的宽度，计算出最佳的截断位置，从而更好地保留字符串的首尾信息。