white-space的值

white-space的值:
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

转载于:https://www.cnblogs.com/xl900912/p/4343814.html

### CSS `white-space` 属性的不同及其显示效果 #### 1. `normal` 该属性表示空白符(如空格、制表符和换行符)会被压缩成单个空格。连续的空白字符会被视为一个单一的空格,并且文本会自动换行[^1]。 ```css p { white-space: normal; } ``` 此适用于大多数常规文本内容,因为它遵循标准的HTML渲染规则。 --- #### 2. `nowrap` 设置为 `nowrap` 时,文本不会自动换行,除非遇到 `<br>` 标签或其他强制换行指令。这通常用于防止文字溢出容器的情况[^4]。 ```css div { white-space: nowrap; border: 1px solid black; width: 200px; } ``` 这种情况下,如果文本长度超过容器宽度,则可能会导致水平滚动条出现或超出边界。 --- #### 3. `pre` 类似于 HTML 中的 `<pre>` 标记,所有的空白符(包括空格、制表符和换行符)都会被保留并按原样显示[^5]。即使容器宽度不足,也不会发生折行操作。 ```css code { white-space: pre; } ``` 适合展示源代码片段或者需要精确保持原始格式的内容。 --- #### 4. `pre-wrap` 继承了 `pre` 的特性——即保留所有空白符的同时允许正常的换行行为。这意味着即便存在大量连贯的空间或回车键产生的新行,在视觉呈现上仍然可以自然断开以适应父级框体大小限制条件下的最佳布局安排需求。 ```css textarea { white-space: pre-wrap; } ``` 非常适合多行输入控件比如文本域等场合下应用以便于既能够维持原有结构又不至于因为过长而破坏整体界面美观度。 --- #### 5. `pre-line` 与 `pre-wrap` 类似之处在于两者都能够实现保存必要的间距关系并且支持自动生成分行点;然而不同的是前者倾向于合并多余的间隔单位从而形成更加紧凑简洁版面设计风格. ```css article p { white-space: pre-line; } ``` 对于那些希望减少冗余却又要兼顾可读性的文档段落来说是个不错的选择方案之一. --- ### 使用场景总结 | | 描述 | 场景 | |------------|----------------------------------------------------------------------------------------|-------------------------------------------------------------| | `normal` | 折叠多余空白并将文本正常换行 | 大多数普通网页正文 | | `nowrap` | 不进行任何类型的自动换行 | 导航栏链接项之间紧密排列 | | `pre` | 完全尊重原文档中的每一个细节 | 显示程序脚本 | | `pre-wrap` | 尊重原有的排版样式同时也让超宽部分合理分割 | 用户评论区 | | `pre-line` | 对齐前先清理掉不必要的间隙再做进一步处理 | 新闻文章 | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值