在页面布局中，文字内容的换行规则会直接影响页面的视觉效果和可读性，css提供了多个属性来控制文字的换行行为，开发者可以根据实际场景选择合适的属性组合实现预期效果。
文字换行相关核心属性
white-space属性
该属性用来设置如何处理元素内的空白字符和换行，常用取值如下：
- normal：默认值，连续的空白符会被合并，换行符会被当作空白符处理，文字会在容器边界自动换行
- nowrap：强制文字不换行，所有内容会在同一行显示，直到遇到<br>标签才会换行
- pre：保留文本中的空白符和换行符，不会自动换行
- pre-wrap：保留空白符和换行符，同时支持自动换行
- pre-line：合并连续空白符，保留换行符，支持自动换行
word-break属性
该属性用于控制非中日韩文字的换行规则，常用取值如下：
- normal：默认值，使用浏览器默认的换行规则
- break-all：允许在任意字符间断行，包括英文单词中间
- keep-all：不允许在英文单词或中日韩文字中间断行，只能在半角空格或连字符处断行
word-wrap属性
该属性也叫overflow-wrap，用于控制当内容超过容器宽度时的换行行为，常用取值如下：
- normal：默认值，只在允许的断点处换行
- break-word：如果一行内无法放下整个单词，会将单词拆分到下一行显示
不同场景的代码示例
场景1：强制文字不换行，溢出显示省略号
当我们需要单行显示文字，超出部分用省略号代替时，可以组合使用white-space和相关溢出属性：
/* 容器样式 */
.single-line-text {
width: 200px;
white-space: nowrap; /* 强制不换行 */
overflow: hidden; /* 溢出内容隐藏 */
text-overflow: ellipsis; /* 溢出部分显示省略号 */
border: 1px solid #ccc;
padding: 8px;
}
<div class="single-line-text">
这是一段很长的测试文字，用来演示单行不换行并且溢出显示省略号的效果
</div>
场景2：长英文单词自动换行不溢出
当容器内有很长的英文单词时，默认情况下可能不会换行导致溢出，此时可以使用word-break属性：
.english-text {
width: 200px;
border: 1px solid #ccc;
padding: 8px;
word-break: break-all; /* 允许在任意字符处断行 */
}
<div class="english-text">
thisisalongenglishwordthatcannotfitinthecontainerthisisalongenglishword
</div>
场景3：保留文本原有换行和空白，同时支持自动换行
如果我们需要保留用户输入的换行和多个空格，同时让内容在容器边界自动换行，可以使用pre-wrap：
.pre-wrap-text {
width: 200px;
border: 1px solid #ccc;
padding: 8px;
white-space: pre-wrap; /* 保留空白和换行，支持自动换行 */
}
<div class="pre-wrap-text">
第一行内容
第二行内容 这里有三个空格
第三行是很长的内容需要自动换行处理
</div>
场景4：长链接自动换行
页面中的长链接默认可能不会换行，使用word-wrap: break-word可以让长链接在容器边界处拆分换行：
.long-link {
width: 200px;
border: 1px solid #ccc;
padding: 8px;
word-wrap: break-word; /* 长单词或链接超出时拆分换行 */
}
<div class="long-link">
https://www.ipipp.com/this/is/a/very/long/link/that/needs/to/break/into/multiple/lines
</div>
属性使用注意事项
不同属性的生效优先级需要注意，word-break的break-all会比word-wrap的break-word更激进，前者会在任意字符处断行，后者只会把整个单词移到下一行，如果下一行还是放不下才会拆分单词。另外white-space的nowrap会覆盖其他换行属性的自动换行效果，使用时需要根据需求合理组合。
CSSword-wrapword-breakwhite-space修改时间：2026-07-11 08:15:37