[分享]css中强制换行的代码

CSS中，在某些情况下，我们需要强制让文字在一定长度后换行，这时候就需要用到wordwrap和wordbreak属性了。wordwrap属性用于规定是否允许单词内换行，取值如下：wordwrap:no...

CSS中，在某些情况下，我们需要强制让文字在一定长度后换行，这时候就需要用到word-wrap和word-break属性了。

word-wrap属性用于规定是否允许单词内换行，取值如下：

word-wrap:normal;    //默认值，允许单词内换行（英文单词换行）
word-wrap:break-word;    //单词内也可换行（中文换行） 

word-break属性用于规定是否允许在单词中断行，取值如下：

word-break:normal;    //默认值，不允许在单词中断行
word-break:break-all;    //允许在单词中断行
word-break:keep-all;    //不允许在非CJK（中日韩）文字中断行，允许在CJK文字中断行 

举个例子，我们设置一个div元素的宽度为300px，文字在此宽度内不得超出，并且允许在单词内或单词后断行：

div{
    width: 300px;
    word-wrap: break-word;
    word-break: break-all;
} 

这样设置之后，当文字达到300px时，就会自动换行，不会出现超出元素宽度的情况。当然，不同浏览器对word-wrap和word-break的处理方式不同，需要根据实际情况进行兼容处理。