html标签体内容换行css样式怎么写

今天给大伙说下标签体内容自动换行的问题，闲话少说直接上代码：

<div class="mian-content">
我是标签体内容，我要换行我是标签体内容，我要换行我是标签体内容，我要换行我是标签体内容，我要换行我是标签体内容，我要换行我是标签体内容，我要换行我是标签体内容，我要换行我是标签体内容，我要换行
</div>

测试了几遍之后，发现下面的两行代码是可以解决这个问题的，赶紧分享出来：

.mian-content{
word-wrap:break-word;
word-break:break-all;
}

但是上述代码对于pre标签是没有效果的，如果你要处理pre标签体内的换行问题，可以试试下面这两行代码，亲测可以：

white-space: pre-wrap;
word-wrap: break-word;

最后分享一下white-space的几个属性值：

normal 默认。空白会被浏览器忽略。

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap 保留空白符序列，但是正常地进行换行。

pre-line 合并空白符序列，但是保留换行符。

inherit 规定应该从父元素继承 white-space 属性的值。

值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

今天给大家分享了css样式处理换行的问题，希望能够帮助到您。