通过合理设置 word-wrap 和 white-space 属性，可确保文本在不同屏幕尺寸下正常换行。1. 使用 word-wrap: break-word 防止长单词溢出；2. 选择 white-space: normal 或 pre-wrap 以控制空白和换行；3. 推荐组合使用 word-wrap: break-word 与 white-space: pre-wrap，兼顾格式保留与响应式换行，提升文本可读性和布局稳定性。
在响应式网页设计中，文字内容需要适应不同屏幕尺寸，避免溢出容器或产生横向滚动条。通过合理使用 word-wrap 和 white-space 这两个CSS属性，可以有效控制文字的换行行为，使文本在各种设备上都能良好显示。
word-wrap：控制长单词和URL的换行
当页面中出现超长单词、连续字符串或未加空格的URL时，容易导致内容溢出父容器。使用 word-wrap（现标准为 overflow-wrap）可解决这一问题。
常用值说明：- normal：只在允许的断字点换行（默认行为）
- break-word：允许长单词强制在任意字符处断开换行
示例：
css
.text-container {
word-wrap: break-word; /* 或 overflow-wrap: break-word */
width: 200px;
}
这样即使遇到类似“supercalifragilisticexpialidocious”这样的长词，也会自动折行，不会破坏布局。
立即学习“前端免费学习笔记（深入）”；
white-space：控制空白符与换行的处理方式
该属性决定空白字符（空格、换行、制表符）是否保留，以及文本是否自动换行。
常用值说明：
- normal：合并空白符，自动换行（适合普通段落）
- nowrap：合并空白符，不换行（常用于单行标题防折行）
- pre：保留所有空白符，不自动换行（类似 pre 标签）
- pre-wrap：保留空白符，允许自动换行（推荐用于多行代码或格式化文本）
- pre-line：合并空白符，但保留换行符并换行
响应式场景建议：
- 普通文本块使用 white-space: normal
- 需保留格式又希望响应式换行的文本用 white-space: pre-wrap
- 避免使用 nowrap 在小屏幕上，除非明确需要单行显示
结合使用实现最佳效果
在实际开发中，通常将这两个属性配合使用，确保文本在各种容器宽度下都表现良好。
推荐组合：
.responsive-text {
word-wrap: break-word;
white-space: pre-wrap;
overflow-wrap: break-word;
}
这种设置既保留了原始换行格式，又能对长单词进行断行，非常适合用户生成内容（如评论、文章摘要）等不可控文本场景。
基本上就这些。掌握好 word-wrap 和 white-space 的搭配，能显著提升响应式文本的可读性和布局稳定性。
