html css 自动换行

### 使用 HTML 和 CSS 实现文本自动换行

#### 利用 `white-space` 属性
为了使文本能够按照预期的方式换行，可以调整 `white-space` 属性。此属性定义了如何处理元素中的空白字符以及是否应该进行自动换行[^1]。

- **`normal`**: 序列中的空白会被浏览器忽略，文本将在必要时自动换行。

div {
    white-space: normal;
}

- **`nowrap`**: 所有序列的空白都会被压缩为单个空格，并且不会发生自动换行，除非遇到 `<br>` 标签。

div {
    white-space: nowrap;
}

#### 控制长单词或URL的断行
有时页面上的某些单词可能特别长以至于超出了容器宽度，这时就需要考虑使用 `word-wrap` 或者更现代的标准名称 `overflow-wrap` 来允许这些内容在适当位置打断并继续在同一行显示其余部分[^3]。

div {
    overflow-wrap: break-word; /* 现代标准 */
    word-wrap: break-word;     /* 较旧版本兼容 */
}

#### 处理不同类型的文本流
针对中文和其他非拉丁字母的语言环境下的特殊需求，还可以利用 `word-break` 属性来决定在哪里拆分单词：

- **`break-all`**: 对于任何长度超过其父级容器宽度的文字都将尽可能早地分割开；对于亚洲语言尤其有用，因为它们通常没有明显的词界线[^5]。

div {
    word-break: break-all;
}

以上方法可以根据实际应用场景组合运用，从而达到理想的文本布局效果。如果只是希望保持简单的自然语句结构，则只需依赖默认的行为即可无需额外配置。