CSS white-space

在html里面多余的空格和换行都是无效的,如果想展示格式话的数据,就需要用到css 的 white-space属性了。


white-space 给了 6个值供我们选择以应对不能同的场景

normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

归纳一下

white-space属性源码空格源码换行<br>换行容器边界换行
normal合并忽略换行换行
nowrap合并忽略换行不换行
pre保留换行换行不换行
pre-wrap保留换行换行换行
pre-line合并换行换行换行

 

### CSS `white-space` 属性详解 #### 基础概念 CSS 的 `white-space` 属性决定了元素内部的空白字符(如空格、制表符和换行符)如何被处理以及文本是否会自动换行。它提供了多种取值选项,每种都有不同的表现形式。 常见的取值及其功能描述如下: - **normal**: 默认值。连续的空白字符会被合并成一个空格,文本会自动换行[^1]。 - **nowrap**: 文本不会自动换行,除非遇到 `<br>` 标签。适用于需要单行显示的内容[^3]。 - **pre**: 保留所有的空白字符序列,类似于 HTML 中的 `<pre>` 标签效果。 - **pre-wrap**: 保留空白字符序列的同时允许文本自动换行。 - **pre-line**: 合并多余的空白字符,但保留换行符的效果。 #### 实际案例分析 以下是几个实际使用的例子,帮助理解不同取值的作用。 ##### 示例 1: 单行不换行 (`white-space: nowrap`) 如果希望一段文字始终在一行内展示而不发生折行,可以使用 `nowrap` 取值。 ```html <div class="no-wrap"> 这是一段很长的文字,我希望它可以一直保持在一行内而不会自动换行。 </div> ``` ```css .no-wrap { white-space: nowrap; } ``` 上述代码中,`.no-wrap` 类设置了 `white-space: nowrap`,因此即使容器宽度不足,也不会触发换行操作[^4]。 --- ##### 示例 2: 保留换行符与缩进 (`white-space: pre-wrap`) 对于多行文本输入框或者需要精确控制格式的情况,可以选择 `pre-wrap` 来保留原始的换行和空格结构。 ```html <pre style="white-space: pre-wrap;"> 这是一个测试, 带有多个换行符和空格。 缩进也会被保留下来。 </pre> ``` 通过这种方式,用户输入的任何换行或空格都会原样呈现给读者[^2]。 --- ##### 示例 3: 自动调整换行策略 (`white-space: pre-line`) 当只需要保留逻辑上的换行而非多余的空间时,推荐采用 `pre-line` 设置。 ```html <p style="white-space: pre-line;"> 这是第一句话。 这是第二句话,在新的一行开始。 </p> ``` 此配置下,虽然源码中有额外的空行分隔两句话,但在最终渲染结果中只会看到一次正常的断行。 --- ### 总结说明 根据不同需求选择合适的 `white-space` 参数能够极大地提升页面布局灵活性与用户体验质量。无论是简单的防止溢出还是复杂的诗歌排版都可以借助这一强大工具实现理想效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值