(137) 表示領域の右端で長い文字を強制的に折り返したい。

投稿者: | 2022年3月28日

74 views

ToDo: 詳細は後日追記する。

1. 問題発生

作成中のページをスマホで見ていたら
意図せず水平スクロールしてしまった!

原因を探ると…
どうやら、長いURL文字列がブロック要素の右端を突き抜けて、親要素の幅を広げていること が原因のようだ。

該当するブロック要素には width:100% を指定してある。
その親要素 bodyには、画面幅いっぱいを期待して width:100% を指定してある。

でも…
パソコンやパソコン上のスマホシミュレーターでは表示領域右端で折り返しているのに、
スマホ実機の時だけは右端を突き抜け、ページが水平スクロールしてしまう。

2. 解決策

該当するブロック要素のstyleに以下を追記した。
親要素の右端に達したら、英単語の途中でも問答無用で折り返す ための指定だ。

「overflow-wrapとは?」は、こちらを参照されたい。

div{
  overflow-wrap: break-word;
}

何だか気持ちが悪いが、一先ずこれでスマホ上の横スクロールは起きなくなった。
後日ちゃんと調査しよう。


カテゴリー: CSS

コメントを残す

メールアドレスが公開されることはありません。


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)