如何让长文本自动换行以避免水平滚动条

当 HTML 中长文本超出容器宽度时，可通过 CSS 控制自动换行，而非依赖 PHP 字符串替换；关键在于移除 white-space: nowrap 等阻止换行的样式，并合理设置 word-break 或 overflow-wrap 属性。

做前端开发时，你大概率遇到过这种情况：一段很长的文本（比如一个超长的 URL、一串 Base64 编码、或者单纯就是没有空格的字符串），在浏览器里死活不肯换行，硬生生把容器撑出水平滚动条。很多人第一反应是到后端用 PHP 的 str_replace 把空格换成 \n，以为这样就能强制换行。结果呢？一点用都没有——因为 HTML 天生忽略普通换行符，除非你同时加上 white-space: pre 或 pre-wrap，但这样又会破坏原本的排版语义，而且维护起来很麻烦。

问题的根源不在于后端，而在于 CSS。换行这件事，天然就是 CSS 的职责。正确的做法是：先检查容器（比如一个 .info 的 div）有没有设置 white-space: nowrap——这个属性一旦出现，就相当于告诉浏览器“死也不能换行”，所有后续的努力都会白费。把它删掉，或者显式设为 normal（默认值），然后再加上合适的换行属性。下面是一个经过验证的组合：

.info {
  width: 100%; /* 或具体宽度，如 600px */
  word-break: break-word;     /* 兼容性好，支持长单词断行 */
  overflow-wrap: break-word;  /* 现代标准写法，同 word-wrap: break-word */
  /* white-space: normal; —— 默认即为 normal，无需显式声明 */
}

这里有几个需要特别注意的细节：

• word-break: break-all 虽然也能换行，但它会无条件地断开任何字符，包括中文词语内部，比如把“中国”拆成“中”和“国”分两行。这在大多数场景下并不理想，所以谨慎使用。
• overflow-wrap: break-word（旧的写法是 word-wrap: break-word）则聪明得多：它只在单词整体无法容纳时才在单词内部断开，更符合阅读习惯。
• 如果文本里包含超长无空格字符串（比如 API 返回的 URL、大段 Base64），可以再加一个 hyphens: auto（需要页面语言支持），或者干脆用 word-break: break-all 作为兜底方案。
• PHP 层真的不需要干预换行逻辑。保持原始数据纯净，把样式控制权交给前端，既利于 SEO，也能让可访问性更好。

总结一句话：文本换行是 CSS 的活儿，别交给 PHP。删掉所有干扰性的样式声明（尤其是 white-space: nowrap），选对语义恰当的换行属性，那个讨厌的水平滚动条自然就消失了。