CSS中强制换行

在CSS中，我们可以使用“white-space”属性来控制文本的换行方式。默认情况下，浏览器会将多余的文本放到下一行，但是在某些情况下，我们希望文本被强制换行，这时候就可以使用“white-space”属性来实现。

1. 使用“pre”标签

在HTML中，我们可以使用“pre”标签来保留文本中的空格和换行符。同时，使用“white-space: pre”样式也可以实现这个效果。例如：

  
    <div style="white-space: pre">
      This is some text
      with line breaks
    </div>
  

以上代码将会在页面上显示为：

2. 使用“word-break”属性

如果我们希望在不改变文本的格式的情况下强制换行，我们可以使用“word-break”属性。例如：

  
    <div style="word-break: break-all">
      Thisisareallylongwordthatneedstobrokenup
    </div>
  

以上代码将会在页面上显示为：

常见问答

1. “white-space: pre”样式和“pre”标签有什么区别？

它们的效果是一样的，都可以保留文本中的空格和换行符。但是“pre”标签会在文本周围添加一些默认样式，例如字体、行高等。

2. “word-break”属性和“word-wrap”属性有什么区别？

它们都可以实现强制换行的效果，但是“word-wrap”属性只能在单词之间进行换行，而“word-break”属性可以在单词内部进行换行。