折り返し制御するcss

長いテキストや長いURLを途中で折り返す時にcssで設定する主なプロパティが

word-break: break-all

または

word-wrap: word-break;
overflow-wrap: word-break;

word-wrapとoverflow-wrapを併記していますが、word-wrapからoverflow-wrapへと改称されたためです。ブラウザによってoverflow-wrapがサポートされていなかったりするので、word-wrapも一緒に記載すると良いです。

それぞれ名前が似ていますが、挙動が違います。

word-break: break-all

好ましくない位置でテキストを折り返してしまうことがあります。

例えばorのような単語でも、orが行ボックスの幅からあふれそうな位置にあれば、あふれる直前で折り返すためoとrの途中で折り返してしまいます。

word-wrap: break-word

単語の途中で折り返さないと行ボックスの幅からあふれてしまうときのみ、その単語の途中で折り返します。 可能な限り折り返しを避けることができます。