本文介绍通过CSS控制HTML文本自动换行的核心方法，重点解决从MySQL获取的长文本在固定宽度div中不换行、触发横向滚动条的问题，强调white-space属性的关键作用及正确实践。
本文介绍通过css控制html文本自动换行的核心方法，重点解决从mysql获取的长文本在固定宽度div中不换行、触发横向滚动条的问题，强调`white-space`属性的关键作用及正确实践。
在Web开发中，当从MySQL数据库动态读取长文本（如文章摘要、用户评论）并渲染到固定宽度的
中时，常出现文本水平溢出、强制出现横向滚动条的现象——这通常并非PHP逻辑问题，而是CSS样式导致的文本强制不换行行为。
你尝试用PHP在空格处插入 \n 的方式（str_replace(" ", "\n", $row["text"])）无效，根本原因在于：
✅ HTML中 \n（换行符）默认不被浏览器渲染为视觉换行；
❌ 即使PHP输出了带换行符的字符串，若CSS设置了 white-space: nowrap 或 white-space: pre 等值，文本仍会保持单行显示。
✅ 正确解法是纯CSS控制，推荐以下标准方案：
.info {
width: 600px; /* 示例宽度 */
word-wrap: break-word; /* 旧版IE兼容（已废弃但仍有效） */
word-break: break-word; /* 主流浏览器断词换行（推荐） */
white-space: normal; /* 关键！确保不设 nowrap/pre */
}? 补充说明：
- white-space: normal（默认值）允许浏览器在空格、连字符或词间自然换行；
- 若需处理超长无空格字符串（如超长URL或连续英文），应额外添加 overflow-wrap: break-word 或 word-break: break-all；
- 避免使用 str_replace(" ", "\n") +
，因\n需配合 white-space: pre 才生效，而这会破坏正常段落排版。
✅ 最佳实践示例（HTML + PHP + CSS）：
<style>
.info p {
margin: 0;
white-space: normal; /* 必须显式声明，覆盖可能的继承值 */
word-break: break-word;
overflow-wrap: anywhere; /* 更现代的替代方案（支持主流浏览器） */
}
</style>
<div class="info">
<p><?= htmlspecialchars($row["text"], ENT_QUOTES, 'UTF-8') ?></p>
</div>⚠️ 注意事项：
- 始终对输出的PHP变量使用 htmlspecialchars() 防XSS攻击；
- 检查浏览器开发者工具（Elements → Computed）确认 .info 或其父元素是否意外继承了 white-space: nowrap；
- 不要依赖PHP截断或插入换行符来解决布局问题——语义与样式分离才是前端最佳实践。
总结：文本换行是CSS职责，而非PHP任务。移除或重置 white-space，配合 word-break 和 overflow-wrap，即可优雅实现响应式自动换行。
