英文單詞的斷句方法

瀏覽器自帶斷句換行方式

• 針對英文單詞：

  • 某個英文單詞很長，父容器容不下：單詞會直接顯示到容器外面
    [圖片上傳失敗...(image-a4df01-1515594703028)]

  • 某一個有兩個單詞，兩個單詞的長度之和大于容器的寬度：第二個單詞會自動的到下一行，出現第一行沒有占滿卻換行了
    [圖片上傳失敗...(image-1bfe20-1515594703028)]

word-wrap：break-word

• 作用： 單詞內斷句
  • 某個英文單詞很長，父容器容不下：會自動根據父容器的寬度在單詞內截斷，多的放到下一行
    [圖片上傳失敗...(image-c83688-1515594703028)]
  • 某一個有兩個單詞，兩個單詞的長度之和大于容器的寬度：第二個單詞會自動的到下一行，出現第一行沒有占滿卻換行了（這個作用和瀏覽器一致）
• 總結：
  • 只會在一個單詞的長度超過父容器的長度的時候斷開換行
  • 當了兩個單詞長度大于容器時，和瀏覽器處理方式一致

word-break:break-all

• 某個英文單詞很長，父容器容不下：會自動根據父容器的寬度在單詞內截斷，多的放到下一行
• 某一個有兩個單詞，兩個單詞的長度之和大于容器的寬度：
  • 第二個單詞繼續在當前行
  • 當第二個單詞的長度超出容器的時候直接截斷第二個單詞放到下一行[圖片上傳失敗...(image-81b443-1515594703028)]
• 總結
  • 當單個單詞長度超過容器長自動斷開 換行
  • 當了兩個單詞長度大于容器時，將第二個單詞超出的部分斷開放在第二行
  • 節省空間避免第一行沒占滿就占第二行