white-space

white-space 指定了如何处理元素内容中的空白符(空格、制表符)和换行,有以下取值:

  • normal:连续的空白符会被合并,换行符会被当作空白符来处理。在空间不足时会出现换行。
  • nowrap:连续的空白符会被合并,换行符会被当作空白符来处理。在空间不足时也不会换行。
  • pre:连续的空白符和换行都会保留,空间不足时不会换行。
  • pre-wrap:连续的空白符和换行都会保留,空间不足时会换行。
  • pre-line:连续的空白符会合并,换行会保留,空间不足时会换行。
属性值 换行符 空格和制表符 空间不足换行
normal 合并 合并 换行
nowrap 合并 合并 不换行
pre 保留 保留 不换行
pre-wrap 保留 保留 换行
pre-line 保留 合并 换行

word-break

word-break 设定了在单词内断行的行为,有以下取值:

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

overflow-wrap

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

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

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


练习

  1. 用 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>

<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>

$$

$$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>

$$