在我们在块级元素中输出英文，你不会发现有问题的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>word-wrap and word-brak</title> </head> <style> .box { width:1000px; height:300px; background-color: #FF0000;} .box p { width: 200px; height: 100px; background: #FFE4C4;} </style> <body> <div class="box"> <p>word-wrap and word-brak the difference</p> </div> </body> </html>
当出现一个单词的长度过长时，你会发现它冲出了块级元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>word-wrap and word-brak</title> </head> <style> .box { width:1000px; height:300px; background-color: #FF0000;} .box p { width: 200px; height: 100px; background: #FFE4C4;} </style> <body> <div class="box"> <p>word-wrap and word-brak the difference . i am longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</p> </div> </body> </html>
这是时候我们需要用上word-wrap或者word-break，但他们有什么区别呢？
一:
word-wrap: break-word;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>word-wrap and word-brak</title> </head> <style> .box { width:1000px; height:300px; background-color: #FF0000;} .box p { width: 300px; height: 100px; background: #FFE4C4; word-wrap: break-word;} </style> <body> <div class="box"> <p>word-wrap and word-brak the difference . i am longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</p> </div> </body> </html>
将单词打断了并换行。
二:
word-break: break-word;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>word-wrap and word-brak</title> </head> <style> .box { width:1000px; height:300px; background-color: #FF0000;} .box p { width: 300px; height: 100px; background: #FFE4C4; word-break: break-word;} </style> <body> <div class="box"> <p>word-wrap and word-brak the difference . i am longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</p> </div> </body> </html>
word-break: break-word; 的效果跟 word-wrap: break-word;基本一样
当word-break还有一个值是break-all
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>word-wrap and word-brak</title> </head> <style> .box { width:1000px; height:300px; background-color: #FF0000;} .box p { width: 300px; height: 100px; background: #FFE4C4; word-break: break-all;} </style> <body> <div class="box"> <p>word-wrap and word-brak the difference . i am longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong</p> </div> </body> </html>
将空余的位置填补了，显示更佳！