在CSS3中,我们可以通过设置word-wrap
和hyphens
属性来实现强制换行。
我们先来看word-wrap
属性。该属性用来控制当一个单词的长度超过了容器的宽度时是否允许换行。默认情况下,当一个单词过长时,它会超出容器的范围,导致容器出现横向滚动条。
.container { width: 200px; border: 1px solid #ccc; word-wrap: break-word; }
上述代码中,我们将容器的宽度设置为200px,并且使用word-wrap: break-word;
来强制换行。这样,当一个单词过长时,它会被强制换行,而不会导致容器出现横向滚动条。
接下来,我们再来看hyphens
属性。该属性用来控制单词的断字方式。默认情况下,当一个单词需要换行时,它会被截断而不是进行断字处理。
.container { width: 200px; border: 1px solid #ccc; word-wrap: break-word; hyphens: auto; }
上述代码中,我们使用hyphens: auto;
来启用自动断字功能。这样,当一个单词需要进行换行时,它会自动进行断字处理,而不会被截断。