記号(:や/)が連続するとword-bleak: break-all;の折り返しが効かない

最近知ってしまった真実…
一部のブラウザで、CSSの強制折り返しが効かないケースがあることがわかりました。

* {
	word-bleak: break-all;
}

こうしときゃ万能だろうという神話を信じていたのに、:(コロン)や/(スラッシュ)が連続している場合は折り返してもらえません。

2016年11月2日現在ではこうなっていました。

  • Safari 10.0.1 … OK
  • Chrome 54.0.2840.71 … NG
  • Internet Explorer 11 … NG

See the Pen word-break: break-all; is incomplete by webdev (@webdev-jp-net) on CodePen.0

こうなるともう、CSSで対処するには
overflow: hidden;で、ぶった切るしか手立てはありません。

あえて言わせていただきたい、そんな値入れないで!!

関連記事

Pocket