在前端开发中，我们经常遇到一个问题：当一条长文本（没有空格）超出了其父容器的宽度时，该如何让它自动换行呢？本文将介绍如何使用CSS来解决这个问题。
问题描述
首先，我们来看一下具体的问题描述。假设我们有一个div元素，它的宽度为200px，里面有一条长文本，没有任何空格，长度超过了200px。代码如下：
<div class="container"> Thisisaverylongtextwithoutanyspacesinit. </div>
此时，长文本会超出父容器的宽度，导致布局错乱。
解决方案
解决这个问题的方法是使用CSS中的word-wrap和white-space属性。具体来说，可以设置word-wrap:break-word和white-space:pre-wrap来实现文本自动换行。代码如下：
.container {
width: 200px;
word-wrap: break-word;
white-space: pre-wrap;
}这样，无论长文本有多长，它都会根据父容器的宽度进行自动换行，不会超出父容器的范围。
属性说明
接下来我们来详细解释一下word-wrap和white-space属性的用法。
word-wrap
word-wrap属性用于控制当一个单词太长时是否允许在中间进行换行。默认情况下，浏览器会尽可能保持单词完整地显示在一行上，如果单词太长超出了父容器的范围，则会被截断。
如果将word-wrap设置为break-word，则浏览器会在单词内部进行换行，使之不超出父容器的宽度。需要注意的是，该属性只对单词内部有效，如果单词本身已经很短了，则不会进行换行。
white-space
white-space属性用于控制元素内部的空白符（空格、制表符、换行符）如何处理。默认情况下，浏览器会忽略多余的空白符，并把连续的空白符合并为一个空格。
如果将white-space设置为pre-wrap，则浏览器会保留所有空白符的原始格式，并自动换行。这个属性通常用于代码或文本编辑器中，以保留原有的换行和空格格式。
示例代码
最后，我们来看一下完整的示例代码：
-- -------------------- ---- ------- ---- ------------------ ---------------------------------------- ------ ------- ---------- - ------ ------ ---------- ----------- ------------ --------- - --------
运行代码后，可以看到长文本已经根据父容器的宽度自动换行了。这个技巧在实际开发中非常有用，可以帮助我们更好地控制布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/605444183ef24c25037845f1