CSS word-wrap 属性

CSS word-wrap 语法

在 CSS 中，word-wrap 属性用于定义当每一行文本的末尾遇到长单词（或长 URL）时，是否对长单词截断并换行。

语法：

word-wrap: 关键字;

说明：

word-wrap 的取值有 2 种，如下表所示。

word-wrap 属性取值
取值	说明
none（默认值）	不截断换行
break-word	截断换行

word-wrap 主要用于防止长单词或 URL 导致容器溢出，而不会影响在正常断字点（空格、连字符等）的换行行为。

注意: 在最新的 CSS 标准中，word-wrap 属性现在已经被标准化为 overflow-wrap 属性。word-wrap 被作为 overflow-wrap 的一个遗留别名保留，以保证代码兼容性。在新的代码中，推荐使用 overflow-wrap。

CSS word-wrap 摘要

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

CSS word-wrap 示例

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

示例 1：word-wrap 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        p {
            width: 200px;
            height: 100px;
            margin-bottom: 10px;
            background-color: skyblue;
        }
        p:nth-of-type(1) { word-wrap: normal; }
        p:nth-of-type(2) { word-wrap: break-word; }
    </style>
</head>
<body>
    <p>This is a very longlonglonglonglonglonglonglong word!</p>
    <p>This is a very longlonglonglonglonglonglonglong word!</p>
</body>
</html>

页面效果如下图所示。

word-wrap 基本用法

word-wrap 和 word-break 的区别

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

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

在实际开发中，我们一般都是将 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-wrap和word-break的区别

分析：

从结果可以看出，默认情况下的文本是自动换行的。但如果单词或 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 这两个属性都是针对英文页面来说的，在中文页面中也会使用（尤其是包含英文单词的中文页面）。