URIライクな文字列で改行してくれないときのcssの充て方
はじめに
先日下記記事を投稿しました。
その後、ブログを確認すると...
おやおや、モバイルくらいのサイズにするとレイアウトが崩れてしまってます...。
今回はこのレイアウト崩れの対処方法です。
ファイルパスの文字列で改行ができていないことが原因
しばらく原因がわからなかったのですが、出力する要素を一つずつ確認していくと、どうやら
/usr/local/opt/icu4c/lib/libicudata.69.dylibの文字幅以上に画面幅を縮めると、レイアウトが崩れることがわかりました。
もう少し見ていくと、この文字内で改行が行われないことがわかりました。
なるほど、なぜかこの英字で改行出来ていないから幅が飛び出してしまってるのね。
overflow-wrap: 'anywhere’を充てる
更に調べていくと下記cssを発見。
どうやらスペースを挟んでいない長い英字列はデフォルトでは改行されないらしい。
uriとかパスとかの文字列は基本スペースなんか入らないから、何も指定しないと画面からはみ出る恐れがあるのね。
一応技術ブログだし、よく出てくるはずなので対応。
cssにoverflow-wrap: 'anywhere’を充てることで解決するぽい。
改修後
治った✨
終わりに
当方cssに明るくなく、基本的なものかもしれませんが少しずつぶち当たって行こうと思います。
（これの解決に3時間くらいかかった...）
