最近の検索
検索オプション
「この要素はオーバーフローの原因になっています。」の原因が分からない。コードのチェックはファイルサイズが大きすぎて拒否されたから自分で見つけるしかない。
右端で折り返すcssにしてあるはずなのに横スクロールが出ていて、原因が分からなかったのだけど、偶然見つけたamazonのURLに日本語が含まれていて異常に長かった。そして、改行できる位置がずっと右側だった。
その他にもWikipediaなど、URLに日本が含まれている所がたくさんあって、そのURLが右端で改行されなかったから横スクロールが出ちゃっていた。
数が多くて直すのが面倒なので、放置するかそのままで改行されるような別の手段を考える。
強制改行のcss、
word-break: break-all;
で対処した。
私の場合は word-break: break-all; で問題ないが、line-break: anywhere; にしておいた。
"※これは元々、overflow-wrap: break-word; や word-break: break-all; が万能の改行処理だったなら、こんなに苦労していないに対するコメントとして2020年1月に書かれたものだが、line-break: anywhere;やwhite-space: break-spaces;の知名度と支持率を上げるため、記事化して人目に触れやすくした。
"
【CSS】文字列を真に折り返したいのなら #CSS - Qiita
https://qiita.com/spaceonly/items/9aa8599a082cb72740b7
overflow-wrap: break-word; の方が見た目が良いので、こっちにした。
"２．overflow-wrap: break-word
表示範囲を超える長いの英数字の文字列: 範囲に収まるように、単語の途中で自動改行
適当なスペースの入っている短い英数字の文字列: 単語の切れ目で自動改行
日本語はデフォルトと同じく、単語の途中で自動改行されます。
"
【CSS】overflow-wrap (word-wrap) と word-break の違い | Hazu Labo
https://web.hazu.jp/overflow-wrap-word-break/
#メモ
"結論から説明すると、以下の指定を提案します。
body {
overflow-wrap: anywhere; /* 収まらない場合に折り返す */
word-break: normal; /* 単語の分割はデフォルトに依存 */
line-break: strict; /* 禁則処理を厳格に適用 */
}
"
文章の折り返し指定のCSS最新版 - ICS MEDIA
https://ics.media/entry/240411/
なるほど。