本文将介绍一种动态截断字符串的方法，使其适应容器宽度。该方法通过 JavaScript 实现，能够在保持字符串首尾部分完整显示的前提下，使用省略号代替中间过长的内容，从而避免文本溢出容器。同时，该方法可以保留首尾单词之间的分隔符，提供更好的阅读体验。
动态截断字符串的 JavaScript 实现
以下是一个使用 JavaScript 实现动态截断字符串的示例代码：
function truncateText(container) { const text = container.innerText; const containerWidth = container.clientWidth; const words = text.split(' '); let truncatedText = ''; // 确保至少保留首尾两个单词 if (words.length 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 实现动态截断字符串的方法。该方法能够根据容器的宽度，自动截断过长的文本，并在首尾之间显示省略号，从而避免文本溢出容器。通过合理使用该方法，可以提高网页的可用性和用户体验。
以上就是动态截断字符串：在首尾之间显示省略号的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520927.html
微信扫一扫 
支付宝扫一扫 
