【CSS】word-wrap换行 和 word-break断句

单词内换行 word-break 

oprea和FF不支持，

word-break: normal;  默认

word-break: break-all;  允许单词内换行

word-break: keep-all; 不允许单词内换行（空格或连接符换行）

单词内断句 word-wrap 

word-wrap: normal; 断字点

word-wrap: break-word; 长单词或url

超出宽度自动换行

不同文字的默认样式：

 ​​​​​​

 

 

处理过后：

<ul id="box">
    <li>
        <h5>长文字</h5>
        <p class="box">文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀文字呀</p>
    </li> 
    <li>
        <h5>长英文</h5>
        <p class="box">unitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunit</p>
    </li> 
    <li>
        <h5>长数字</h5>
        <p class="box">12345123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345123451234512345</p>
    </li>
    <li>
        <h5>多类型</h5>
        <p class="box">unitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunitunit文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字哦文字字哦文字哦文字哦文字哦文字哦文字哦文345123451451234512345123451234512345123451234512345123451234512345123451234512345</p>
    </li> 
</ul>

ul {
    padding: 0;
    margin: 0;
}
li {
    width: 400px;
    list-style: none;
    border: 1px solid #333;
    margin-bottom: 10px;
    padding: 10px;
}
.bg {
    background: red;
}
.box {
    word-wrap:break-word;
    word-break:break-all;
}

解决方法：

.box {
    word-wrap:break-word;
    word-break:break-all;
}