一分钟解决一个bug之"为什么我的<p>不会自动换行？"

---

问题场景

尝试使用Bootstrap实现图文环绕布局时，发现了以下异常现象：

<div class="clearfix border"> 
<img src="https://img0.baidu.com/it/u=1073866360,3080101825&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
class="col-sm-12 col-md-6 float-md-end md-5 ms-md-3 border" width="300px"/>    
<p>111111111111111111111111111111111111111</p>
<p>111111111111111111111111111111111111111</p>  
<p>111111111111111111111111111111111111111</p>  
<p>111111111111111111111111111111111111111</p>  
<p>111111111111111111111111111111111111111</p>  
<p>111111111111111111111111111111111111111</p>  
</div>

预期效果 vs 实际效果

✅ 期望效果	❌ 实际效果
图片右侧环绕文本	图片下方堆叠文本
文本自然换行有间隙	连续字符无换行

✅ 期望效果

❌ 实际效果

问题根源

当文本内容为无空格超长字符串时：

1. 浏览器默认将连续字符视为单个单词
2. 容器宽度不足时，文本会直接溢出而非自动换行
3. 导致浮动元素下方没有足够的垂直空间，触发布局塌陷

解决方案

方法一：HTML内容优化

<p>11 11 11...（添加空格分隔）</p>
<!-- 或 -->
<p>111111<br>111111<br>...</p>

方法二：CSS强制换行

.text-wrapper p {
    word-wrap: break-word;  /* 允许单词内换行 */
    overflow-wrap: break-word;  /* 现代浏览器标准属性 */
    hyphens: auto;  /* 支持连字符换行 */
}

方案对比

	优点	缺点	适用场景
方法一	完全控制换行位置	内容维护成本高	固定内容展示
方法二	自适应各种屏幕尺寸	可能产生非语义换行	动态内容呈现