实现长文本自动换行防止容器溢出的方法

许多新手 Web 开发者在从数据库读取长文本并放入固定宽度的 div 时，常常发现页面意外出现横向滚动条。问题其实不在 PHP，而是 CSS——浏览器并未自动执行换行。本文深入解析这一常见陷阱，重点讲解 white-space 属性的正确使用方法。

在 Web 开发中，从 MySQL 动态获取长文本（如文章摘要、用户评论）并渲染到有限宽度的 div 内，是极为常见的需求。然而理想与现实差距明显：文本经常撑破容器边界，横向滚动条不请自来。多数人第一时间检查 PHP 逻辑，猜测是否漏掉了换行符？实际上方向错了，根源在 CSS——是样式指令告诉浏览器“不要换行”。

有开发者尝试用 PHP 在空格处插入 \n 字符，例如 str_replace(" ", "\n", $row["text"])，却毫无效果。原因在于 HTML 中 \n （换行符）默认不会被浏览器渲染为视觉换行，只当作普通空白处理。更重要的是，即便输出了含换行符的字符串，只要 CSS 设置了 white-space: nowrap 或 white-space: pre，文本依然固执地保持单行排列。

因此，解决之道完全在于 CSS 自身。下面给出最推荐的方案，兼容性出色且代码简洁：

.info {
  width: 600px;
  word-wrap: break-word;      /* 兼容旧版 IE */
  word-break: break-word;     /* 主流浏览器断词换行 */
  white-space: normal;        /* 关键：覆盖可能继承的 nowrap */
}

重要补充：

• white-space: normal 是浏览器的默认值，允许浏览器在空格、连字符或单词之间自然换行；
• 如果需要处理超长无空格字符串（如连续英文字母或没有破折号的 URL），可额外添加 overflow-wrap: break-word 或 word-break: break-all；
• 切勿再使用 PHP 插入 \n 配合

  的老方法——因为 \n 只有搭配 white-space: pre 才能生效，而这样会打乱段落正常排版，得不偿失。

若想获得更完整的实践参考，下面将 HTML、PHP 与 CSS 整合在一起，可直接复制使用：

最后，几个常被忽略的细节值得注意：

• 输出 PHP 变量时，务必使用 htmlspecialchars() 防止 XSS 攻击，这是不可动摇的安全准则；
• 如果在页面上测试上述代码仍无效，请打开浏览器开发者工具的 Elements 面板，查看 Computed 样式，确认 .info 或其父元素是否意外继承了 white-space: nowrap（某些框架或 UI 库可能默认设置）；
• 不要再使用 PHP 截断文本或插入换行符来强制解决布局问题。语义与样式各司其职，才是前端工程化的正确理念。

一句话总结：文本换行是 CSS 的职责，并非 PHP 的。将 white-space 重置为 normal，再配合 word-break 和 overflow-wrap，即可让任意长文本在固定宽度容器内优雅地自动换行。