处理空白符
white-space 属性用来设置文本内空白符 (如空格回车 tab 字符等) 的处理方式, 可选值有 normal | pre | nowrap | pre-wrap | pre-line, 默认值为 normal 该属性出自 CSS1, 在 CSS 2.1 中新增了属性值 pre-wrap 和 pre-line 不同取值的含义见表 3.6:
属性值 | 含义 |
---|---|
normal | 忽略空白符 [1],但保留换行符,即碰到容器边界时自动换行 |
pre | 保留所有空白符 [2],即便文本超出容器边界也不换行。其行为类似 html 中的 标签 |
nowrap | 忽略空白符,但始终在同一行内显示所有文本,直到文本结束或者遇到标签 |
pre-wrap | 保留所有空白符,但保留换行符,即文本碰到容器边界时自动换行 |
pre-line | 合并空白符序列 [3],但保留换行符,即文本碰到容器边界时自动换行 |
注:[1] 忽略文本开头结尾及换行符 (回车) 前面的空白符, 并把换行符转换为空格, 一行中多个连续的空白符, 会被合并成一个空格[2] 所有空白符保持原样, 不作任何处理[3] 一行中多个连续的空白符, 会被合并成一个空格
white-space 属性可以与 overflow 属性结合使用, 来控制文本超出容器边界时的处理方式在 overflow 属性为默认值的情况下, 文本超出容器后, 容器会出现滚动条
可以把 white-space 属性设置为 nowrap, 把 overflow 属性设置为 hidden, 让超出容器的文本自动隐藏如:
- p {
- width: 200px;
- font-size: 14px;
- overflow: hidden;
- white-space: nowrap;
- border: 1px solid #ccc;
- }
来源: https://www.2cto.com/kf/201802/721481.html