CSS white-space

原创已于 2022-02-22 20:49:48 修改 · 820 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2022-02-22 20:30:54 首次发布

css 专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍了CSS中的white-space属性，用于控制元素内空白字符的处理方式，包括正常合并、禁止换行、预格式化等。通过示例展示了不同值的效果，如文本换行、空白符保留等，帮助理解该属性在布局和文本显示中的应用。

`white-space`

white-space 属性决定了如何处理一个元素中的 white space.

MDN 文档中指明了在 HTML 中一共有 5 种字符为 white space(空白符, 下面出现 white space 的地方都会以空白符代替)
- \t (TAB) (\u0009): 制表符
- \n (LF) (\u000A): 换行符
- \r (CR) (\u000D): 回车符(Carriage Return)
- ' ' (SPACE) (\u0020): 空格
- FF \u000C: 换页, Form Feed 的缩写. 优快云引用 wikipedia 的话可以理解为这个符号强制打印机离开当前页而从下一页的顶部继续

使用下面的代码展示在浏览器这些字符的展示情况

<p>你&#x000C;&#x000C;&#x000C;&#x000C;好</p>
<p>你&#x0009;&#x0009;&#x0009;&#x0009;好</p>
<p>你&#x000A;&#x000A;&#x000A;&#x000A;好</p>
<p>你&#x000D;&#x000D;&#x000D;&#x000D;好</p>
<p>你&#x00020;&#x00020;&#x00020;&#x00020;好</p>

可以看到不同浏览器对换页这个符号的展示是不同的, 目前我也没有遇到过. 所以剩下的内容都不会包括 FF

这个属性指明了两件事情
- 是否合并空白符, 以及如何合并
- 是否在自动换行(soft-wrap)的时候换行

属性值

支持 inherit, initial, revert, unset 四种全局变量值
- 如果某个元素不写 white-space, 那么其将自动继承父元素值
关键字值
- normal: 连续的空白符会被合并. 换行符被当作空白符处理. 文字在必要时换行以填充行盒子.
- nowrap: 合并空白符的规则和 normal 一样, 但是文本内的换行无效.
- pre: 连续的空白符被保留. 只在遇到换行符或者 <br> 元素时才换行.
- pre-wrap: 连续的空白符被保留. 在遇到换行符或者 <br> 元素时, 或者为了填充行盒子才会换行
- pre-line: 连续的空白符被合并. 在遇到换行符或者 <br> 元素时, 或者为了填充行盒子才会换行
- break-spaces: 与 pre-wrap 的行为相同, 除了
  - 任何保留的空白符都会占据空间, 即便在行尾
  - 任何保留的空白符后都可能换行, 包括在空白符之间
  - 这样保留的空间会占据空间不会挂起, 会影响盒子的内在尺寸 (min-content 和 max-content)

例子

先看代码
- ```
<div class="box box1">
  月光如流水&#x00020;&#x00020;&#x00020;&#x00020;一般，
  静静地泻在这一片叶子和花上。
  薄薄的青雾浮起在荷塘里。
  叶子和花仿佛在牛乳中洗过一样；
  又像笼着轻纱的梦。虽然是满月，
  天上却有一层淡淡的云，所以不能朗照；
  但我以为这恰是到了好处——酣眠固不可少，
  小睡也别有风味的。
</div>
```
- 在 VS Code 查找 \n 并开启正则匹配模式, 就能看到空白符了
- ```
.box {
  width: 15em;
  border: 1px solid #111;
}
```
- normal 的话很合理, 所有的换行符都被当作空格处理, 流水 后连续的空格被合并. 📕但是空格符并没有作为一个字符作为宽度计算, 因为第一行只有 13 个文字加上 1 个逗号, 很明显, 既然宽度是 15 字宽, 那么第 15 个字就是浏览器为了适应行盒子而加上的换行符吧
- ❓提问: 为什么每行文字前用来缩进的空格没有了?
  - 答案: 因为每行文字后面的换行符被当作空格, 和下一行文字前面的空格形成了连续的空格, 然后被合并成一个空格了.😀

nowrap

<div class="box box2">
  月光如流水&#x00020;&#x00020;&#x00020;&#x00020;一般，
  静静地泻在这一片叶子和花上。
  薄薄的青雾浮起在荷塘里。
  叶子和花仿佛在牛乳中洗过一样；
  又像笼着轻纱的梦。虽然是满月，
  天上却有一层淡淡的云，所以不能朗照；
  但我以为这恰是到了好处——酣眠固不可少，
  小睡也别有风味的。
</div>

.box {
  width: 15em;
  border: 1px solid #111;
}
.box2 {
  white-space: nowrap;
}

连续的空白符被合并, 换行符被当作空白符, 文本内的所有换行均无效

pre

<div class="box box3">
  月光如流水&#x00020;&#x00020;&#x00020;&#x00020;一般，
  静静地泻在这一片叶子和花上。
  薄薄的青雾浮起在荷塘里。
  叶子和花仿佛在牛乳中洗过一样；
  又像笼着轻纱的梦。虽然是满月，
  天上却有一层淡淡的云，所以不能朗照；
  但我以为这恰是到了好处——酣眠固不可少，
  小睡也别有风味的。
</div>

.box {
  width: 15em;
  border: 1px solid #111;
}
.box3 {
  white-space: pre;
}

效果:
- 连续的空白符被保留;
- 文本不会为了填充行盒子而换行, 所以超出边界
- ❓提问: 为什么整段文字的开头和结尾也有空行?
  - 答案: 因为 <div> 后有个换行, <div> 前也有个换行. 😅
- 由于换行符不会再被当作空白符, 连续空白符也不会合并, 所以每行文本开头就出现了用于缩进的空白

pre-wrap
- 效果
  - 空白符被保留
  - 遇到换行符就换行
  - 为了填充行盒子而换行
pre-line
- 效果
  - 空白符被合并 📕只有这里和 pre-wrap 不同
  - 遇到换行符就换行
  - 为了填充行盒子而换行
break-space
- 为了对比效果, 在荷塘里后面加了很多空格
- ```
<div class="box box6">
  月光如流水&#x00020;&#x00020;&#x00020;&#x00020;一般，
  静静地泻在这一片叶子和花上。
  薄薄的青雾浮起在荷塘里。&#x00020;&#x00020;&#x00020;&#x00020;&#x00020;&#x00020;&#x00020;&#x00020;&#x00020;&#x00020;
  叶子和花仿佛在牛乳中洗过一样；
  又像笼着轻纱的梦。虽然是满月，
  天上却有一层淡淡的云，所以不能朗照；
  但我以为这恰是到了好处——酣眠固不可少，
  小睡也别有风味的。
</div>
```
- 效果
  - 正如文档所说, 即便连续的空格在行尾, 也不会被合并, 甚至可能被换行.
- 理解对 min-content 的影响
  - 先来看下面的内容
    - ```
    <div class="box6">我是谁我在哪</div>
```
- ```
.box6 {
  width: min-content;
  white-space: break-spaces;
}
```
    - 可以看到每个字后面都出现了断行, 这时因为 min-content 对于文本内容来说, 将会在一切可以断行的地方断行, 所以整个宽度就和这段文字种最长的单词一样, 由于汉字的特殊性(每个汉字后都可以断行), 就出现了这样的效果
    - 为什么不像上面一样是一字一断呢? 因为文字中有标点, ，和。这种符号浏览器是不会将其渲染到行首的，所以只能留在行尾
  - 还是挺不好理解的，也可能会有错误的地方，欢迎指正~谢谢你看到这里