CSS white-space

### 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` 参数能够极大地提升页面布局灵活性与用户体验质量。无论是简单的防止溢出还是复杂的诗歌排版都可以借助这一强大工具实现理想效果。