使用CSS控制文本换行可解决长单词溢出问题，通过word-wrap: break-word防止内容溢出，white-space处理空白与换行，word-break控制断词方式，结合响应式设计确保文本在不同容器中合理布局。
HTML文本默认会根据容器宽度自动换行，但有时显示效果不符合预期，比如长单词或URL不换行导致溢出。可以通过CSS控制文本的换行行为，确保内容在容器内合理布局。
使用CSS控制自动换行
通过设置以下CSS属性，可以让文本在容器边界处正确换行：
• word-wrap 或 overflow-wrap：允许长单词或URL断开换行。使用word-wrap: break-word; 可防止内容溢出容器。• white-space：控制空白符和换行符的处理方式。常用值包括：
-
normal：合并空白符，自动换行（默认）。-
nowrap：不换行，所有空白合并为一个空格。-
pre-wrap：保留空白和换行，同时允许自动换行。• word-break：控制单词内部如何断开：
-
break-all：允许在任意字符间断行（适合中文等无空格语言）。-
keep-all：不允许在单词内断行（适合中日韩文本）。实际应用示例
假设有一个宽度固定的容器，希望内容自动适应：
<div style="width: 200px; border: 1px solid #ccc; word-wrap: break-word;"> ThisIsAnExtremelyLongWordThatMightNotBreakProperlyWithoutCSS </div>
加上 word-wrap: break-word; 后，长单词会在容器边缘断开，避免横向溢出。
立即学习“前端免费学习笔记（深入）”；
响应式场景下的建议
在响应式设计中，容器宽度会变化，应结合以下做法：
• 使用相对单位（如%、max-width）定义容器宽度，使布局更灵活。• 配合
box-sizing: border-box; 精确控制盒模型尺寸。• 在移动端优先考虑
word-wrap: break-word; 和 white-space: normal; 组合，确保文本始终可读。基本上就这些，合理使用CSS换行属性，就能让HTML文本根据容器宽度自动调整显示效果。
