CSS文本自动换行主要依赖word-wrap、word-break和white-space属性，word-wrap: break-word可使长单词或URL在必要时断行，避免溢出容器；word-break: break-all强制所有文本断行（包括单词内部），break-word则在单词间优先断行；white-space: normal默认处理空白字符，允许换行，pre-wrap则保留空白并允许换行，结合使用这些属性，可有效解决固定宽度容器中的文本溢出问题，提升页面布局的稳定性和可读性。
CSS文本自动换行：6大实用技巧详解
在网页开发中,文本自动换行是构建响应式布局、提升阅读体验的核心要素，当容器宽度动态变化或文本内容过长时，若缺乏有效的换行控制，极易导致文本溢出容器、破坏页面布局，甚至严重影响用户浏览体验，CSS提供了丰富的属性和方法来精确控制文本换行行为，本文将深入剖析6个实用技巧，助您灵活应对各种复杂的文本换行场景。
基础换行控制：word-wrap 与 overflow-wrap
word-wrap（已废弃）及其标准替代属性 overflow-wrap 是处理长单词（如URL、长ID、连续字母数字组合）强制换行的核心属性，默认情况下，这类连续字符序列不会在容器边界处自动断行，容易造成溢出，通过设置 overflow-wrap: break-word;，浏览器会在必要时（即当长单词到达容器边界时）主动在单词内部进行断词换行。
示例：
.container {
width: 200px;
border: 1px solid #ccc;
overflow-wrap: break-word; /* 标准属性，推荐使用 */
/* 兼容旧浏览器可使用：word-wrap: break-word; */
}
效果：容器内的长单词（如thisisaverylongword）或超长URL（如https://example.com/very/long/path/to/resource）会在到达容器宽度限制时自动在单词内部断行，有效防止内容溢出容器边界。
空白符处理：white-space 精准控制换行逻辑
white-space属性决定了文本中的空白符（空格、换行符、制表符）如何被渲染，从而直接影响换行行为，以下是常用取值及其应用场景：
white-space: normal（默认）：连续空白符会被合并为单个空格，文本在到达容器边界时自动换行，适用于大多数常规文本段落。white-space: pre-wrap：严格保留文本中的所有空白符（包括连续空格、制表符）和换行符，同时允许在容器边界处自动换行，非常适合需要保留原始格式的场景，如代码片段、诗歌、歌词或邮件引述。white-space: pre-line：合并连续的空白符为单个空格，但保留文本中显式的换行符，在容器边界处自动换行，适用于需要保留换行结构但忽略多余空格的场景，如用户输入的留言、多行地址。
示例：
.pre-wrap-text {
white-space: pre-wrap;
width: 150px;
border: 1px solid #eee;
}
效果：输入文本（包含换行符和多个连续空格）会完整保留其原有的换行和空格结构，同时当文本宽度超过150px容器时，会在单词边界或空白符处自动换行。
断词规则：word-break 精细化控制换行点
word-break属性比overflow-wrap更激进，它定义了浏览器在单词内部或单词之间寻找换行点的具体规则，这对于处理非中日韩（CJK）文本或需要在极窄容器内强制布局的场景尤其重要，常用取值包括：
word-break: normal（默认）：非CJK文本仅在允许的断词点（如连字符处）换行；CJK文本（中文、日文、韩文）则可以在任意字符间自然换行，这是最平衡的设置。word-break: break-all：允许在任意字符处断行，包括单词内部，非常适合在非常窄的容器（如移动端侧边栏）内显示长英文文本，但过度使用可能显著降低阅读流畅性。word-break: keep-all：CJK文本仅在字符间换行（保持单词/词语完整）；非CJK文本不允许在单词内部断行（需配合overflow-wrap: break-word处理长单词溢出），适用于需要保持英文单词完整性的场景。
示例：
.break-all-text {
word-break: break-all;
width: 120px;
border: 1px solid #f00;
}
效果：超长英文单词（如pneumonoultramicroscopicsilicovolcanoconiosis）会被强制在容器宽度内的任意位置断开，适用于极端窄空间下的文本展示。
连字符断词：hyphens 优化阅读流畅性
对于使用连字符的语言（如英语、德语），hyphens属性可以智能地在符合语言规则的位置自动插入连字符，显著提升断行后的阅读体验和美观度。**关键点**：此属性需要配合HTML的lang属性（如lang="en"）指定文本语言，浏览器才能根据该语言的断词词典和规则判断最佳断词点。
示例：
.hyphenated-text {
hyphens: auto; /* 启用自动连字符断词 */
lang="en"; /* 指定语言为英语，至关重要！ */
width: 180px;
border: 1px solid #00f;
}
效果：长单词（如internationalization）会在符合英语连词规则的合适位置插入连字符（如inter-national-ization），避免生硬的单词断裂，使文本更易读。
现代断词优化：text-wrap 提升布局美观度
CSS Text Module Level 3 引入了更智能的text-wrap属性，旨在优化文本换行以提升整体布局的美观度和可读性，目前主流浏览器（Chrome, Edge, Firefox）已支持其核心取值：
