首頁 >web前端 >css教學 >CSS文字換行word-wrap和word-break的差別

CSS文字換行word-wrap和word-break的差別

yulia原創: 2018-09-10 14:22:092523瀏覽

在工作中，常常會遇到需要給文字換行的情況，換行的方式也有很多，例如：word-wrap，word-break，很多人會想這兩個東西是什麼，不都是換行嗎，有什麼區別呢？也有很多人搞不清楚，只能死記硬背寫一個word-wrap：break-word；word-break：break-all ，這樣的東西來強制斷句。那今天就跟大家聊聊word-wrap和word-break的差別。

word-wrap和word-break的區別

word-break：break-all 和word-wrap：break-word兩種寫法都是讓英文句子在父級寬度不夠的情況下換行。兩個屬性都同樣是讓文字換行，但存在著細微的差別，大部分時候剛接觸到這兩個屬性時會無法區別。

區別：
word-wrap：break-word作用是強制讓文字換行。一般情況下當父級寬度不夠的時候，不管英文單字自動換行是當一整個單字不夠放時，整個單字一起換行到下一行，看似很合理的寫法，但是在有些情況下會出現不可預期的情況。就是當一個英文單字的長度超過了父級容器長度時，英文單字還是會顯示一整個單字而導致超出容器範圍。
還有一種情況是，當遇到一個單字很長時，單字會自動換行，也會使上一行空出很多空間。在這種情況下，IE創造出一種新的屬性，word-break：break-all它強製文字換行，無論一句話到達父級容器寬度時是不是一整個單詞，都會強制換行，使單字斷句，如果碰上一個單字超出父級容器寬度，會使單字斷開並換行。

舉例

1、先不給他任何樣式，可以看出那個超長的單字已經溢出了父級容器

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   div{width: 200px;border: 1px solid #000;}
  </style>
 </head>
 <body>
  <div>看看这一句话：This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>
 </body>
</html>

效果圖：

CSS文字換行word-wrap和word-break的差別