CSS word-break 属性

CSS word-break 语法

在 CSS 中，word-break 属性用于定义文本如何断行。它控制着当文本到达容器边缘时，是否在单词内部进行断行，尤其是在处理非中文 / 日文 / 韩文文本（简称 “CJK 文本”）时。

语法：

word-break: 关键字;

说明：

word-break 的取值有以下 3 种。

normal（默认值）：对于大多数非 CJK 文本，只在空格或连字符等允许的断字点断行。对于 CJK 文本，可以在任意字符之间断行。
break-all：对于非 CJK 文本，可以在任意字符之间断行，即使在单词内部。这使得文本在容器边缘处更紧凑，但可能会破坏单词的完整性。对于 CJK 文本，其行为与 normal 类似（因为 CJK 文本通常允许在字符间断行）。
keep-all：对于 CJK 文本，不允许在字符之间断行，只在正常的空格或连字符处断行，这可能会导致溢出。对于非 CJK 文本，其行为与 normal 类似。

注意:

word-break 和 word-wrap ( 或 overflow-wrap) 属性都与文本换行有关，但它们的侧重点不同。word-wrap 主要用于防止长单词溢出容器，而 word-break 控制更一般的断行规则，尤其是对非 CJK 文本的单词内部断行和 CJK 文本的字符间断行。
break-all 对于需要强制在容器边缘换行的非 CJK 文本非常有用，尤其是在屏幕宽度较小或内容较长时，尽管这可能导致在单词中间断开。

CSS word-break 摘要

属于	CSS 文本属性
使用频率	中
是否继承	是
默认值	normal
兼容性	查看
官方文档	查看
MDN	查看

CSS word-break 示例

接下来，我们通过一个简单的例子来讲解一下 CSS word-break 属性是如何使用的。

示例 1：word-break 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p {
            width: 300px;
            height: 150px;
            margin-bottom: 10px;
            background-color: skyblue;
        }
        p:nth-of-type(1) { word-break: normal; }
        p:nth-of-type(2) { word-break: break-all; }
        p:nth-of-type(3) { word-break: keep-all; }
    </style>
</head>
<body>
    <p>Python is an interpreted, object-oriented, high-level programming language with dynamic semantics.欢迎来到绿叶网！</p>
    <p>Python is an interpreted, object-oriented, high-level programming language with dynamic semantics.欢迎来到绿叶网！</p>
    <p>Python is an interpreted, object-oriented, high-level programming language with dynamic semantics.欢迎来到绿叶网！</p>
</body>
</html>

页面效果如下图所示。

word-break 基本用法

word-break 和 word-wrap 的区别

word-break 和 word-wrap 长得跟亲兄弟一样，它们的区别如下。

word-break：强调 “如何” 进行单词内的断句换行。
word-wrap：强调 “是否允许” 单词内的断句换行。

在实际开发中，我们一般都是将 word-wrap: break-word; 和 word-break: break-all; 搭配一起使用，从而实现长单词或长 URL 的强制换行。对于两者的其他属性值不需要去了解。

示例 2：word-wrap vs word-break

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p {
            width: 150px;
            height: 150px;
            margin-bottom: 10px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <p>Welcome, everyone! Please remember our homepage website: https://www.lvyenet.com/index.html.</p>
</body>
</html>

页面效果如下图所示。

word-break和word-wrap的区别

分析：

从结果可以看出，默认情况下的文本是自动换行的。但如果单词或 URL 太长的话，就会超出元素的宽度。

在上面例子中，如果为 p 元素添加 word-wrap: break-word; 后，此时页面效果如下图所示。

使用word-wrap: break-word;的效果

在上面例子中，如果为 p 元素添加 word-break: break-all; 后，此时页面效果如下图所示。

使用word-break: break-all;的效果

word-wrap: break-word; 是用来决定是否允许单词内断句的。如果不允许的话，长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话再进行单词内的断句。

word-break: break-all; 则更变态，因为它断句的方式非常粗暴，它不会尝试把长单词挪到下一行，而是直接就进行单词内的断句。

word-wrap 和 word-break 这两个属性都是针对英文页面来说的，在中文页面中也会使用（尤其是包含英文单词的中文页面）。