如何让指定HTML结构中的超长文本自动换行显示？

嘿，这个问题挺常见的——当遇到没有空格或换行符的超长字符串时，哪怕加了white-space: pre-wrap，浏览器也不会主动在字符串中间换行。这里有几个简单有效的解决方案：

方法1：用word-break: break-all强制换行 #

这个CSS属性允许浏览器在任意字符处换行，完美适配这种无空格的超长文本。你只需要给<p>标签添加这个样式就行：

<div class="row" style="width:700px" > 
  <div class="col-md-10 col-xs-10"> 
    <div class="messages msg_sent"> 
      <p style="white-space: pre-wrap; word-break: break-all"> 
        m3rWa/5pgNMn006VHS6lJrkag1KK5aiwAJyYY7IHy+OBMYcl7R+Jw044xzRw/AdORhpj36AJ8j3DFZZjMUo3kLDKcVDd+UxRhGEFhxqfw/kj2+lExz7nPSjKRA0ybDLrygP2Cb2+9WQfUlC+tjVJaRGjhmMFEwsiTAjwH0DXM3U8Fd/aYyYHiicSD4KgUo5k3qJLVbROgA6kj0yC1eN0AgoE+O1Yz0SF1JmH76tBbMm74CmezE1g.box 
      </p> 
    </div> 
  </div> 
</div>

方法2：用overflow-wrap: break-word（更温和的换行） #

如果你希望浏览器优先在单词边界换行，只有当整个单词都超出容器时才在中间截断，可以用这个属性代替word-break：

<p style="white-space: pre-wrap; overflow-wrap: break-word">
  <!-- 你的超长文本 -->
</p>

更优的做法：用外部CSS代替内联样式 #

如果项目里有很多类似的文本，建议把样式写到CSS文件里，方便统一维护：

.messages p {
  white-space: pre-wrap;
  word-break: break-all; /* 或者 overflow-wrap: break-word */
}

这样设置后，你的超长文本就会自动适配700px宽度的容器，不会跑出边界啦～

内容的提问来源于stack exchange，提问作者user824624