长文指南：css中几种常用的换行方法，独家秘籍，超赞换行黑科技

CSS 换行技巧：让网页布局更加灵活

在网页设计中，控制元素文本的换行和单词断开方式至关重要。通过合理使用 CSS 中的 white-space 和 word-break 属性，你可以轻松实现这一目标，从而创建出更加灵活和美观的网页布局。

white-space 属性

white-space 属性控制元素中文本的换行方式。它有以下几个取值：

• normal： 默认值。文本自动换行，根据容器大小自动调整。
• nowrap： 不允许在单词内部换行。例如，当文本超过容器宽度时，它会以多行形式显示，但单词不会被拆分。
• pre： 保留原始的空白符（空格和换行符）。文本按照源码中的格式显示。
• pre-line： 保留原始的空白符，但在遇到边界时自动换行。
• pre-wrap： 合并连续的空白符，并在遇到边界时自动换行。
• break-spaces： 尽量保持多字母语言的连续性，适用于东亚语言。

word-break 属性

word-break 属性控制单词在换行时的断开方式。它有以下几个取值：

• normal： 默认值。允许在单词内部换行。例如，当文本超过容器宽度时，它会将单词拆分成多行显示。
• break-all： 允许在单词内部换行，但会尽量避免在单词中间断开。
• break-word： 允许在单词内部换行，即使这意味着在单词中间断开。
• keep-all： 不允许在单词内部换行，即使这意味着单词会超出容器宽度。

技巧示例

下面是一些使用 white-space 和 word-break 属性的示例：

• 在一个固定宽度的容器中显示一段文本，并允许文本自动换行，可以使用以下 CSS 代码：

div {
  width: 200px;
  white-space: normal;
}

• 在一个固定宽度的容器中显示一段文本，但不允许文本自动换行，可以使用以下 CSS 代码：

div {
  width: 200px;
  white-space: nowrap;
}

• 在一个固定宽度的容器中显示一段文本，并保留原始的空白符（空格和换行符），可以使用以下 CSS 代码：

div {
  width: 200px;
  white-space: pre;
}

• 在一个固定宽度的容器中显示一段文本，并允许单词在单词内部断开，可以使用以下 CSS 代码：

div {
  width: 200px;
  word-break: break-all;
}

• 在一个固定宽度的容器中显示一段文本，但不允许单词在单词内部断开，可以使用以下 CSS 代码：

div {
  width: 200px;
  word-break: keep-all;
}

通过合理使用这些属性，你可以轻松控制元素中文本的换行方式和单词在换行时的断开方式，从而创建出更加灵活和美观的网页布局。

常见问题解答

• 问：white-space 和 word-break 属性有什么区别？
  答：white-space 控制文本的换行方式，而 word-break 控制单词在换行时的断开方式。
• 问：在哪些情况下使用 nowrap 属性是有用的？
  答：当你想在固定宽度区域内显示文本时，使用 nowrap 属性是有用的，这样文本就不会被拆分成多行。
• 问：如何保留原始的空白符？
  答：使用 white-space: pre 属性可以保留原始的空白符，包括空格和换行符。
• 问：如何防止单词在单词中间断开？
  答：使用 word-break: keep-all 属性可以防止单词在单词中间断开，即使这意味着单词会超出容器宽度。
• 问：如何适用于东亚语言？
  答：white-space: break-spaces 属性适用于东亚语言，它可以尽量保持多字母单词的连续性。