本文将介绍一种动态截断字符串的方法，使其适应容器宽度。该方法通过 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.");
}代码解释：
- truncateText(container) 函数接受一个容器元素作为参数。
- 获取容器的内部文本 text 和容器的宽度 containerWidth。
- 使用空格分割文本，得到单词数组 words。
- 初始化 truncatedText 为空字符串。
- 循环遍历单词数组，每次添加一个单词到 truncatedText 中。
- 将 truncatedText 设置为容器的内部文本，并在其后添加省略号。
- 检查容器的 scrollWidth 是否大于 containerWidth。如果大于，则表示文本溢出容器，停止添加单词，并将容器的内部文本设置为 truncatedText 加上省略号。
- 如果容器宽度足够，则将 truncatedText 更新为包含新单词的版本。
- 为了确保至少显示首尾两个单词，逻辑进行了修改，从尾部向前迭代，直到超出容器宽度。
- 增加了对单词数量小于等于2的情况处理，直接显示全部文本。
- 添加了对第一个单词加最后一个单词已经超出宽度的情况处理，直接显示第一个单词加省略号。
- 增加了对容器元素未找到的错误处理。
CSS 样式
以下是一些建议的 CSS 样式，用于确保文本能够正确显示：
#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 实现动态截断字符串的方法。该方法能够根据容器的宽度，自动截断过长的文本，并在首尾之间显示省略号，从而避免文本溢出容器。通过合理使用该方法，可以提高网页的可用性和用户体验。
