如何在CSS中实现多行文本自动换行_使用word-wrap和white-space控制换行

在前端页面布局中，多行文本的换行控制直接影响页面的可读性和美观度，当文本内容超出容器宽度时，需要通过CSS属性合理控制换行规则，避免出现文本溢出、横向滚动条等不符合预期的情况。CSS中的word-wrap和white-space属性是实现多行文本自动换行的核心属性，二者搭配使用可以覆盖绝大多数换行场景。

white-space属性基础

white-space属性用来设置如何处理元素内的空白字符和换行规则，它的常用取值及作用如下：

• normal：默认值，连续的空白字符会被合并为一个，文本会在容器边界处自动换行
• nowrap：强制文本在一行内显示，不会自动换行，直到遇到<br>标签才会换行
• pre：保留文本中的空白字符和换行符，文本不会自动换行
• pre-wrap：保留空白字符和换行符，同时文本会在容器边界处自动换行
• pre-line：合并连续的空白字符，保留换行符，文本会在容器边界处自动换行

下面是一个简单的示例，展示不同white-space取值的换行效果：

/* 容器基础样式 */
.text-container {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 20px;
}

/* 不同white-space取值 */
.normal {
    white-space: normal;
}

.nowrap {
    white-space: nowrap;
}

.pre-wrap {
    white-space: pre-wrap;
}

<div class="text-container normal">
    这是一段很长的测试文本，用来查看normal取值下的换行效果，内容会超出容器宽度吗
</div>
<div class="text-container nowrap">
    这是一段很长的测试文本，用来查看nowrap取值下的换行效果，内容会超出容器宽度吗
</div>
<div class="text-container pre-wrap">
    这是一段很长的测试文本，    用来查看pre-wrap取值下的换行效果，内容会超出容器宽度吗
</div>

word-wrap属性基础

word-wrap属性也叫overflow-wrap，用来设置当长单词或URL地址超出容器宽度时是否允许在单词内换行，它的常用取值如下：

• normal：默认值，只在允许的断字点换行，长单词不会断开换行
• break-word：允许在长单词或URL地址内部换行，避免内容溢出容器

需要注意的是，word-wrap属性只在white-space允许换行的前提下才会生效，如果white-space设置为nowrap，即使word-wrap设置为break-word也不会换行。

以下是word-wrap属性的使用示例：

.word-normal {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
    white-space: normal;
    word-wrap: normal;
    margin-bottom: 20px;
}

.word-break {
    width: 200px;
    border: 1px solid #ccc;
    padding: 10px;
    white-space: normal;
    word-wrap: break-word;
}

<div class="word-normal">
    这是一个很长的英文单词：supercalifragilisticexpialidocious，看看是否会换行
</div>
<div class="word-break">
    这是一个很长的英文单词：supercalifragilisticexpialidocious，看看是否会换行
</div>

多行文本自动换行的常用组合方案

实际开发中，要实现多行文本自动换行，通常需要组合使用这两个属性，以下是两种常见的场景方案：

场景一：普通文本自动换行

对于中文、英文短单词混合的普通文本，只需要设置white-space为normal，word-wrap为break-word即可，既能保证正常换行，又能避免长单词溢出。

.common-text {
    width: 300px;
    border: 1px solid #eee;
    padding: 15px;
    white-space: normal;
    word-wrap: break-word;
}

场景二：保留文本原有格式并自动换行

如果文本中包含用户输入的换行和连续空格，需要保留原有格式的同时实现自动换行，可以设置white-space为pre-wrap，word-wrap为break-word。

.pre-format-text {
    width: 300px;
    border: 1px solid #eee;
    padding: 15px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

注意事项

在使用这两个属性时，还需要注意以下几点：

• word-wrap的break-word取值会在单词内部断开，可能影响英文阅读体验，如果页面以英文为主，可以优先使用word-break: break-all属性，根据排版需求选择
• 如果容器设置了固定高度，还需要搭配overflow属性处理超出部分，避免出现内容被裁剪的情况
• 部分旧版本浏览器对word-wrap的break-word支持存在问题，如果需要兼容旧浏览器，可以添加overflow-wrap: break-word作为补充声明

通过合理搭配word-wrap和white-space属性，就可以灵活控制多行文本的换行规则，满足不同场景下的排版需求，让页面文本展示更加规范美观。

CSSword-wrapwhite_space多行文本换行修改时间：2026-06-20 16:03:28