Created
August 29, 2018 08:04
-
-
Save wxingheng/ab69d35d1cb7950db8e944e6038db580 to your computer and use it in GitHub Desktop.
css 的多空格处理
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| CSS 提供了一个 **white-space** 属性，可以提供更精确一点的空格处理方式。该属性共有六个值，除了一个通用的inherit（继承父元素），下面依次介绍剩下的五个值。 | |
| **white-space: normal** | |
| ```language | |
| <p> hellohellohello hello | |
| world | |
| </p> | |
| ``` | |
| ```language | |
| p { | |
| width: 100px; | |
| background: red; | |
| } | |
| ``` | |
|  | |
| **white-space: nowrap** | |
| white-space属性为nowrap时，不会因为超出容器宽度而发生换行。 | |
| ```language | |
| p { | |
| white-space: nowrap; | |
| } | |
| ``` | |
|  | |
| ** white-space: pre** | |
| white-space属性为pre时，就按照<pre>标签的方式处理。 | |
| ```language | |
| p { | |
| white-space: pre; | |
| } | |
| ``` | |
|  | |
| **white-space: pre-wrap** | |
| white-space属性为pre-wrap时，基本还是按照<pre>标签的方式处理，唯一区别是超出容器宽度时，会发生换行。 | |
| ```language | |
| p { | |
| white-space: pre-wrap; | |
| } | |
| ``` | |
|  | |
| **white-space: pre-line** | |
| white-space属性为pre-line时，意为保留换行符。除了换行符会原样输出，其他都与white-space:normal规则一致。 | |
| ```language | |
| p { | |
| white-space: pre-line; | |
| } | |
| ``` | |
|  |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment