CSS 强制字符串换行 - HTML

在 HTML 中，当我们需要显示一段较长的字符串时，可能会出现字符串超出其容器的情况。而在默认情况下，字符串会自动换行到下一行继续显示。但是有时候我们希望能够手动控制字符串的换行方式，这时候就需要使用 CSS 的强制换行属性。

CSS white-space 属性

CSS 中的 white-space 属性用于设置元素内空白的处理方式。它有以下几个值：

• normal: 默认值，元素内文本按正常方式排列，连续的空白符在渲染时会被合并为一个空格。
• nowrap: 文本排列时不允许换行，超出容器的部分将被裁剪。
• pre: 保留空白符，文本中的空白符和换行符会被保留，但在容器宽度不足时会出现滚动条。
• pre-wrap: 保留空白符，但是在容器宽度不足时会自动折行。
• pre-line: 保留换行符，但是多个连续空白符会被合并为一个空格，文本在容器宽度不足时会自动折行。

CSS 强制换行

如果想要手动强制文本在某个位置换行，可以使用   。   是常见的 HTML 实体符号，表示一个空格。它可以在字符串中插入空格，作为强制换行的标记。

例如，以下代码会在字符串中插入三个  ，并在它们之间强制换行：

<p>CSS&nbsp;&nbsp;&nbsp;强制&nbsp;&nbsp;&nbsp;字符串&nbsp;&nbsp;&nbsp;换行</p>

如果不想使用  ，也可以使用 white-space 属性中的 pre 或 pre-wrap 值来保留空白符并自动折行。

示例代码

使用 white-space 属性中的 pre-wrap 值来实现在文本后强制换行的代码如下：

<style>
  p {
    white-space: pre-wrap;
  }
</style>

<p>CSS 强制字符串换行</p>

效果如下：

CSS 强制字符串 换行

总结

通过 white-space 属性的设置，我们可以自由控制字符串的空白符和换行符的处理方式，并实现在文本中的指定位置强制换行的效果。