是html中最基本的结构化组件之一,它可以用来划分页面中的不同区域。在CSS中,我们可以使用div来进行样式控制,包括文字换行。 通常情况下,文字在div中默认是不会自动换行的,而是会在一行显示完成后...
div {
white-space: normal;
}
然后,我们需要使用word-wrap属性来控制单词的换行方式。word-wrap有两个取值:normal和break-word。对于normal取值,如果一个单词太长,会溢出div的边界;而对于break-word取值,会将该单词强制分割,放在两行中显示。 div {
word-wrap: break-word;
}
同时,我们也可以在想要实现自动换行的文字的周围添加标签,这样能够更加清晰地展示想要实现换行的文字的作用范围: 下面的文字用div包裹起来:
<div>这是一段非常非常非常非常非常非常非常非常非常长的文字,应该会超过一行</div>
设置CSS实现文字自动换行:
div {
white-space: normal;
word-wrap: break-word;
}
结果如下所示: