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