要使 CSS 内的内容在超出容器宽度时自动换行，可以使用 word-wrap 和 overflow-wrap 属性。这两个属性都可以用来控制长单词或 URL 等不可分割的字符串在达到容器边界时的行为。默认情况下，这些长字符串可能会延伸到容器之外，破坏布局的外观。通过设置这些属性，可以确保内容适当地换行，保持布局的整洁。
这里是如何应用这些属性的示例：
.wrap-text {
word-wrap: break-word; /* 旧版本的浏览器支持 */
overflow-wrap: break-word; /* 标准属性 */
}
将上述 CSS 类应用于任何需要自动换行的元素上，例如：
<div class="wrap-text">这里是一些可能会非常长并且需要自动换行的内容，比如长URL或者没有空格的长文本串。</div>
此外，如果你也想保证在单词之间适当地断行，而不仅仅是在长字符串无法继续在同一行显示时，可以使用 white-space 属性。例如：
.wrap-text {
white-space: pre-wrap; /* 保留空白符，同时允许内容自动换行 */
word-wrap: break-word;
overflow-wrap: break-word;
}
这将确保即使是格式化的文本（如代码或者诗歌）也能够根据容器的宽度适当换行，同时保留空白符（如空格和缩进）。
发布者：彬彬笔记，转载请注明出处：https://www.binbinbiji.com/css/3203.html
