CSS-长单词换行

white-space: no-wrap;

• 永不换行，保持一行

word-break: break-all;

• 超出就换行，不管单词完整性
• 连续中英文叹号不能换行！！！！

word-wrap（overflow-wrap）:break-word;

• 尽量保持单词完整，一行都展示不下这个单词 才换行
• 会因为保持单词完整性，而留下很多空白

终极换行大法

.break-all {
    word-break: break-all;   // word不能折行连续的感叹号 ！！！
    word-wrap: break-word;
    overflow-wrap: break-word;  // word-wrap别名，css3属性，都写上，万一以后word-wrap去掉了呢
}

• 超出就换行，不管单词完整性
• 不会留下很多空白
• 连续！！！！也能换行

参考：

1. 彻底搞懂word-break、word-wrap、white-space
2. word-break:break-all和word-wrap:break-word的区别