white-space 备忘录
white-space 属性可以设置元素内空白字符的表现形式。
空白字符表现类型分为两种:
pre(preserve)= 保留空格wrap= 换行
下面的表格总结了各种 white-space 关键字值的行为:
| white-space | 保留空格 | 换行符生效 | 自动换行 |
|---|---|---|---|
| normal(默认) | ✅ | ❌ | ✅ |
| nowrap | ✅ | ❌ | ❌ |
| pre | ✅ | ✅ | ❌ |
| pre-line | ❌ | ✅ | ✅ |
| pre-wrap | ✅ | ✅ | ✅ |
值得注意的点:white-space 属性不会影响 nbsp; 和 <br/>,它俩具有绝对优先级。
写这个备忘录的主要原因在于:pre 组三个属性命名和差异着实有点迷惑🤔。好在使用场景上有更好的区分点和记忆点。
- 如果期望类似 Markdown Code 的渲染场景,保留一切换行/空格,那直接使用
pre-wrap即可,在此基础上,如果不希望单行内容自动换行,则考虑使用pre。 - 单行省略之类不需要换行的场景:
nowrap。 - 其它场景下无需使用该属性,遵从默认行为(normal)即可。