许多新手 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，即可让任意长文本在固定宽度容器内优雅地自动换行。
