CSS 文本换行控制：text-wrap、white-space 和 word-break 详解

当前位置：点晴教程→知识管理交流 →『技术文档交流』

zhenglin

2025年11月5日 15:10 本文热度 816

在网页设计中，文本内容的显示方式对可读性和整体视觉效果至关重要。CSS 提供了多个属性来控制文本的换行和空白处理，其中最常用的是 text-wrap、white-space 和 word-break。

本文将详细介绍这三个属性，并比较它们的异同。

属性详解

1. white-space 属性

white-space 属性控制元素内空白的处理方式，同时也会影响元素的自动换行行为。


.element {
  white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;
}

normal：默认值，空白会被忽略，文本自动换行
nowrap：文本不换行，直到遇到 <br> 标签
pre：保留空白和换行，类似 <pre> 标签
pre-wrap：保留空白序列，但正常地进行换行
pre-line：合并空白序列，但保留换行符
break-spaces：与 pre-wrap 类似，但任何保留的空白序列都会占用空间

2. word-break 属性

word-break 属性指定了如何在单词内进行换行。


.element {
  word-break: normal | break-all | keep-all | break-word;
}

normal：使用默认的断行规则
break-all：对于非中文/日文/韩文文本，可在任意字符间断行
keep-all：中文/日文/韩文文本不断行，非CJK文本行为同normal
break-word：已废弃，建议使用 overflow-wrap: anywhere

3. text-wrap 属性

text-wrap 属性是较新的CSS属性，用于控制文本的换行方式。


.element {
  text-wrap: auto | balance | pretty | stable | wrap | nowrap;
}

auto：默认值，浏览器自动决定换行策略
balance：尝试平衡文本行的长度，使多行文本看起来更均衡
pretty：在换行时尽量不断开重要的标点符号连接
stable：优先保持布局稳定性
wrap：允许换行
nowrap：不允许换行

三者比较

实际应用示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本换行属性比较</title>
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
        }
        
        .example {
            border: 1px solid #ccc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        
        .code {
            background-color: #eee;
            padding: 10px;
            border-radius: 3px;
            font-family: monospace;
            margin: 10px 0;
        }
        
        .nowrap-example {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .pre-example {
            white-space: pre;
        }
        
        .break-all-example {
            word-break: break-all;
            width: 200px;
        }
        
        .balance-example {
            text-wrap: balance;
            width: 250px;
            font-weight: bold;
            font-size: 1.2em;
        }
        
        @supports not (text-wrap: balance) {
            .balance-example::after {
                content: " (您的浏览器不支持text-wrap: balance)";
                font-size: 0.7em;
                color: #ff0000;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS文本换行属性比较</h1>
        
        <div class="example">
            <h2>white-space: nowrap</h2>
            <div class="code">white-space: nowrap;</div>
            <div class="nowrap-example">
                这是一段非常长的文本内容，当设置了white-space: nowrap时，文本不会换行，而是会一直延伸直到遇到br标签或者容器边界，超出部分会被隐藏。
            </div>
        </div>
        
        <div class="example">
            <h2>white-space: pre</h2>
            <div class="code">white-space: pre;</div>
            <div class="pre-example">
                这是一段使用   pre   属性的文本，
                它会保留    空格和
                换行符，
                就像pre标签一样。
            </div>
        </div>
        
        <div class="example">
            <h2>word-break: break-all</h2>
            <div class="code">word-break: break-all;</div>
            <div class="break-all-example">
                这是一个非常长的英文单词：Pneumonoultramicroscopicsilicovolcanoconiosis，以及一个URL：https://www.example.com/very-long-path-name/index.html
            </div>
        </div>
        
        <div class="example">
            <h2>text-wrap: balance</h2>
            <div class="code">text-wrap: balance;</div>
            <div class="balance-example">
                这是一个使用text-wrap: balance的长标题，它会尝试平衡多行文本的长度
            </div>
        </div>
    </div>
</body>
</html>

总结

white-space 主要控制空白字符的处理和整体换行行为
word-break 专注于控制单词内部的换行方式，特别是长单词和URL
text-wrap 是较新的属性，专注于提高文本换行的质量和美观度

在实际开发中，这三个属性常常需要结合使用，才能达到最佳的文本显示效果。理解它们的区别和适用场景，可以帮助我们更好地控制网页排版，提升用户体验。

参考文章：原文链接

该文章在 2025/11/5 15:11:10 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。