动态截断字符串：在首尾之间显示省略号

本文将介绍一种动态截断字符串的方法，使其适应容器宽度。该方法通过 JavaScript 实现，能够在保持字符串首尾部分完整显示的前提下，使用省略号代替中间过长的内容，从而避免文本溢出容器。同时，该方法可以保留首尾单词之间的分隔符，提供更好的阅读体验。

动态截断字符串的 JavaScript 实现

以下是一个使用 JavaScript 实现动态截断字符串的示例代码：

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

  // 确保至少保留首尾两个单词
  if (words.length <= 2) {
      container.innerText = text;
      return;
  }

  truncatedText = words[0] + " - "; // 初始化为第一个单词和分隔符

  for (let i = words.length - 1; i > 0; i--) {
    let tempText = truncatedText + "... - " + words[i]; // 尝试添加最后一个单词
    container.innerText = tempText;

    if (container.scrollWidth > containerWidth) {
      // 超出容器宽度，停止添加单词
      container.innerText = truncatedText + "... - " + words[words.length - 1];
      break;
    }
    truncatedText = truncatedText + "... - " + words[i];
  }

  // 如果第一个单词加最后一个单词已经超出宽度，则直接显示第一个单词加省略号
  if (container.scrollWidth > containerWidth) {
      container.innerText = words[0] + "...";
  }
}

// 调用示例
const containerElement = document.getElementById('container');
if (containerElement) {
    truncateText(containerElement);
} else {
    console.error("Container element with ID 'container' not found.");
}

代码解释：

1. truncateText(container) 函数接受一个容器元素作为参数。
2. 获取容器的内部文本 text 和容器的宽度 containerWidth。
3. 使用空格分割文本，得到单词数组 words。
4. 初始化 truncatedText 为空字符串。
5. 循环遍历单词数组，每次添加一个单词到 truncatedText 中。
6. 将 truncatedText 设置为容器的内部文本，并在其后添加省略号。
7. 检查容器的 scrollWidth 是否大于 containerWidth。如果大于，则表示文本溢出容器，停止添加单词，并将容器的内部文本设置为 truncatedText 加上省略号。
8. 如果容器宽度足够，则将 truncatedText 更新为包含新单词的版本。
9. 为了确保至少显示首尾两个单词，逻辑进行了修改，从尾部向前迭代，直到超出容器宽度。
10. 增加了对单词数量小于等于2的情况处理，直接显示全部文本。
11. 添加了对第一个单词加最后一个单词已经超出宽度的情况处理，直接显示第一个单词加省略号。
12. 增加了对容器元素未找到的错误处理。

CSS 样式

以下是一些建议的 CSS 样式，用于确保文本能够正确显示：

千音漫语

全能AI配音神器

下载

#container {
  width: 220px; /* 容器宽度，可以根据实际情况调整 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 使用省略号表示溢出内容 */
}

样式解释：

• width: 设置容器的宽度。
• white-space: nowrap: 禁止文本换行，确保文本在一行内显示。
• overflow: hidden: 隐藏溢出容器的内容。
• text-overflow: ellipsis: 使用省略号来表示被隐藏的文本。

HTML 结构

以下是一个使用该方法的 HTML 结构示例：

  content content content content content content content content content

注意事项

• 确保容器元素具有固定的宽度，以便 JavaScript 代码能够正确计算文本是否溢出。
• white-space: nowrap 样式可能会导致文本在某些情况下无法正确显示。可以根据实际情况调整该样式。
• 该方法仅适用于单行文本的截断。对于多行文本，需要使用其他方法来实现。

总结

本文介绍了一种使用 JavaScript 和 CSS 实现动态截断字符串的方法。该方法能够根据容器的宽度，自动截断过长的文本，并在首尾之间显示省略号，从而避免文本溢出容器。通过合理使用该方法，可以提高网页的可用性和用户体验。