white-space

white-space 指定了如何处理元素内容中的空白符（空格、制表符）和换行，有以下取值：

normal：默认值，连续的空白符会被合并，换行符会被当作空白符来处理。在空间不足时会出现换行。
nowrap：连续的空白符会被合并，换行符会被当作空白符来处理。在空间不足时不会换行。
pre：连续的空白符和换行都会保留，空间不足时不会换行。
pre-wrap：连续的空白符和换行都会保留，空间不足时会换行。
pre-line：连续的空白符会合并，换行会保留，空间不足时会换行。

属性值	换行符	空格和制表符	空间不足换行
normal	合并	合并	换行
nowrap	合并	合并	不换行
pre	保留	保留	不换行
pre-wrap	保留	保留	换行
pre-line	保留	合并	换行

<div class="box normal">normal：三眼鸭     的编程
    教室，祝你学有所成早日成为大牛。</div>
<div class="box nowrap">nowrap：三眼鸭     的编程
    教室，祝你学有所成早日成为大牛。</div>
<div class="box pre">pre：三眼鸭     的编程
    教室，祝你学有所成早日成为大牛。</div>
<div class="box pre-wrap">pre-wrap：三眼鸭     的编程
    教室，祝你学有所成早日成为大牛。</div>
<div class="box pre-line">pre-line：三眼鸭     的编程
    教室，祝你学有所成早日成为大牛。</div>
<style>
    .box {
        width: 200px;
        margin: 20px 0;
        background-color: pink;
    }

    .normal {
        white-space: normal;
    }
    .nowrap {
        white-space: nowrap;
    }
    .pre {
        white-space: pre;
    }
    .pre-wrap {
        white-space: pre-wrap;
    }
    .pre-line {
        white-space: pre-line;
    }
</style>

$$demo <div class="box normal">normal：三眼鸭的编程教室，祝你学有所成早日成为大牛。</div> <div class="box nowrap">nowrap：三眼鸭的编程教室，祝你学有所成早日成为大牛。</div> <div class="box pre">pre：三眼鸭的编程教室，祝你学有所成早日成为大牛。</div> <div class="box pre-wrap">pre-wrap：三眼鸭的编程教室，祝你学有所成早日成为大牛。</div> <div class="box pre-line">pre-line：三眼鸭的编程教室，祝你学有所成早日成为大牛。</div> <style> .box { width: 200px; margin: 20px 0; background-color: pink; }

.normal {
    white-space: normal;
}
.nowrap {
    white-space: nowrap;
}
.pre {
    white-space: pre;
}
.pre-wrap {
    white-space: pre-wrap;
}
.pre-line {
    white-space: pre-line;
}

</style>

word-break

word-break 设定了在字符内断行的行为，有以下取值：

normal：默认值，在 CJK（中文/日文/韩文）任意字符间断行，空格等符号间断行，对于单词数字不断行。
break-all：任意字符间都可断行。
keep-all：任意字符间都不能断行。
break-word：已弃用，用 overflow-wrap: anywhere 代替。

<div class="box normal">normal：你好，这里是三眼鸭的编程教室。abcdefg123456789</div>
<div class="box break-all">break-all：你好，这里是三眼鸭的编程教室。abcdefg123456789</div>
<div class="box keep-all">keep-all：你好，这里是三眼鸭的编程教室。abcdefg123456789</div>
<style>
    .box {
        width: 200px;
        margin: 20px 0;
        background-color: pink;
    }

    .normal {
        word-break: normal;
    }
    .break-all {
        word-break: break-all;
    }
    .keep-all {
        word-break: keep-all;
    }
</style>

$$demo <div class="box normal">normal：你好，这里是三眼鸭的编程教室。abcdefg123456789</div> <div class="box break-all">break-all：你好，这里是三眼鸭的编程教室。abcdefg123456789</div> <div class="box keep-all">keep-all：你好，这里是三眼鸭的编程教室。abcdefg123456789</div> <style> .box { width: 200px; margin: 20px 0; background-color: pink; }

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

</style> $$

overflow-wrap

overflow-wrap 表明了当一个不能分开的字符串（长单词或数字）会溢出时，是否允许其断行，有以下取值：

normal：不允许断行。
break-word：允许字符串断行，宽度为 min-content 时不会拆分字符串，断行在 flex 子项中不起作用。
anywhere：允许字符串断行，宽度为 min-content 时会拆分字符串，断行在 flex 子项中起作用。

$$tip 通常在长文本或由用户输入内容的区域，都需要设置 overflow-wrap: anywhere ，预防文本溢出的情况。 $$

<div class="box normal">normal：loooooooooooooooooooooongword, It is so goooooooooooood</div>
<div class="box break-word">break-word：loooooooooooooooooooooongword, It is so goooooooooooood</div>
<div class="box anywhere">break-word：loooooooooooooooooooooongword, It is so goooooooooooood</div>
<style>
    .box {
        width: 200px;
        margin: 20px 0;
        background-color: pink;
    }

    .normal {
        overflow-wrap: normal;
    }
    .break-word {
        overflow-wrap: break-word;
    }
    .anywhere {
        overflow-wrap: anywhere;
    }
</style>

$$demo <div class="box normal">normal：loooooooooooooooooooooongword, It is so goooooooooooood</div> <div class="box break-word">break-word：loooooooooooooooooooooongword, It is so goooooooooooood</div> <div class="box anywhere">anywhere：loooooooooooooooooooooongword, It is so goooooooooooood</div> <style> .box { width: 200px; margin: 20px 0; background-color: pink; }

.normal {
    overflow-wrap: normal;
}
.break-word {
    overflow-wrap: break-word;
}
.anywhere {
    overflow-wrap: anywhere;
}

</style> $$

适用场景

早期开发中一般是搭配 white-space 和 word-break 使用，现在已经不推荐使用了，直接使用 overflow-wrap 即可。

练习

用 flex 布局实现以下效果，注意页面缩放下的变化、

$$demo

<div class="row"> <img class="image" src="https://qiniu.3yya.com/b5b136e5277c163429138de33f38e924/b5b136e5277c163429138de33f38e924.png" /> <div class="text"> 二十六个字母是 abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYXYZ The twenty-six letters are abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYXYZ </div> </div>

    max-width: 600px;
    margin: 0 auto;
}

.image {
    width: 200px;
    height: 200px;

    object-fit: cover;
}

.text {
    overflow-wrap: anywhere;

    border: 4px teal solid;
}

</style>

$$answer

<div class="row">
    <img
        class="image"
        src="https://qiniu.3yya.com/b5b136e5277c163429138de33f38e924/b5b136e5277c163429138de33f38e924.png"
    />
    <div class="text">
        二十六个字母是 abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYXYZ
        The twenty-six letters are
        abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYXYZ
    </div>
</div>

<style>
    .row {
        display: flex;

        max-width: 600px;
        margin: 0 auto;
    }

    .image {
        width: 200px;
        height: 200px;

        object-fit: cover;
    }

    .text {
        overflow-wrap: anywhere;

        border: 4px teal solid;
    }
</style>