在html页面开发过程中，文本排版是常见需求，很多时候需要让较长的一句话按照指定规则换行，避免文本溢出容器或者排版混乱。不同的场景适合不同的换行实现方式，接下来会逐一介绍常用的方法。
使用br标签实现强制换行
br标签是html原生的换行标签，放在需要换行的位置，就可以让后面的内容强制换到下一行显示，这种方式属于硬编码换行，换行位置固定，不会因为容器宽度变化而改变。
基础使用示例：
<p>这是第一句内容<br>这是第二句内容，通过br标签实现强制换行</p>
这种方式适合需要固定换行位置的场景，比如地址信息、诗歌排版等，但是如果句子长度变化，可能需要手动调整br标签的位置。
使用CSS的white-space属性控制换行
white-space属性用来设置如何处理元素内的空白和换行，通过不同的属性值可以实现自动换行或者保留原有换行格式的效果。
常用属性值说明
| 属性值 | 说明 |
|---|---|
| normal | 默认值，合并多余空白，文本自动换行 |
| nowrap | 不换行，文本会在一行显示，超出容器也不会换行 |
| pre | 保留文本中的空白和换行，不会自动换行 |
| pre-wrap | 保留空白和换行，同时支持自动换行 |
| pre-line | 合并多余空白，保留换行，支持自动换行 |
示例：让容器内的文本自动换行，同时保留原有的换行符：
<style>
.text-box {
width: 200px;
white-space: pre-wrap;
border: 1px solid #ccc;
padding: 10px;
}
</style>
<div class="text-box">
这是一段比较长的内容
这里原本有换行符
会自动按照原有换行和容器宽度自动调整显示
</div>
使用word-break和word-wrap属性控制换行
这两个属性主要用来控制单词或者长字符串的换行规则，适合处理英文长单词或者连续的字符串。
word-break属性
用来指定非CJK（中文、日文、韩文）文本的换行规则：
- normal：使用浏览器默认的换行规则
- break-all：允许在任意字符间断行，包括英文单词中间
- keep-all：只能在半角空格或者连字符处换行，CJK文本不断行
word-wrap属性
也叫overflow-wrap，用来设置当内容溢出容器时是否换行：
- normal：只在允许的断点换行
- break-word：如果一行放不下长单词，会在单词内部换行
示例：处理长英文单词换行：
<style>
.word-box {
width: 150px;
word-break: break-all;
border: 1px solid #ccc;
padding: 10px;
}
</style>
<div class="word-box">
Thisisaverylongenglishwordthatneedstobebrokenintolines
</div>
不同场景的选择建议
如果是固定位置的换行，优先使用<br>标签；如果是需要文本根据容器宽度自动换行，同时保留原有格式，使用white-space: pre-wrap；如果是处理长英文单词或者连续字符串的换行，搭配使用word-break和word-wrap属性。
需要注意，使用CSS控制换行时，要确保容器的宽度是明确的，否则自动换行可能不会生效。另外，如果内容是通过后端动态返回的，带有换行符的话，需要配合pre-wrap属性才能保留原有换行效果。
html换行white_spaceCSSbr标签修改时间：2026-06-10 15:57:27