まず第一に: ブラウザのデフォルトの動作では、長い単語が長すぎてその領域を超えると、まず次の行に移動されます。
1. word-wrap:break-word
w3school マニュアルでは、これについて説明しています: 長い単語または URL アドレスは次の行に折り返すことができます。つまり、単語の長さがその単語が配置されている領域を超える場合、ブラウザでは文字が次の行に移動されます。
この属性は、ブラウザが長い単語を最初に折り返せるようにすることのみを意味します。単語が長すぎる場合、ブラウザはデフォルトで単語を次の行に移動し、この属性が設定されている場合、長い単語は切り詰められます。
2 、 word-break:break-all 属性は、自動行折り返しの処理方法と切り詰める場所を指定します
は、行の最後の単語が領域を超えた場合に切り捨て処理方法が切り捨てられることを意味します。 long, if この属性が追加されていない場合、ブラウザはデフォルトで下に移動します
word-break:break-all 属性を設定すると、現在の行が切り捨てられます。