【CSS】長い文字列をCSSで強制的に改行させたいときは『word-wrap:break-word;』を使うべし。

最終更新: 2018-08-20

• 
  overflow-wrap: break-word; (旧称: word-wrap: break-word;)
  
  • 長所: 単語全体が 1 行に収まる長さの場合は、単語が中途半端に分割されることを防ぐために単語の前で改行してくれます。
  • 
    短所: 幅の指定が必要です。
    
    テーブルセルやflexboxについては下記をご覧ください。
    
    🔗 word-breakとword-wrapはややこしい
    
    🔗 `word-wrap:break-word;`がflexboxで効かない件
    
  
  
• 
  word-break: break-all;
  
  • 長所: 幅の指定は不要です。
  • 短所: 単語の途中かどうかに関係なく、1 行の終端の位置で強制的に改行します。

🔗 overflow-wrap - CSS: カスケーディングスタイルシート | MDN
🔗 word-break - CSS: カスケーディングスタイルシート | MDN

---

word-wrap の記述例

# HTML

<div>

  abcdefghijklmnopqrstuvwxyz

</div>

# CSS

div {

  background: #cda;

  color: #333;

  width: 100px; /*※幅を指定する必要あり */

  word-wrap: break-word;

  /* overflow-wrap: break-word; IE, Edgeは未対応 */

}

出力結果

どのブラウザでもきちんと折り返し表示されています。

Firefox 3.6.8
Chrome 5.0
Safari 5.0
Opera 10.60
IE6
IE7
IE8