ラウザでテキスト文字が勝手に折り返されてしまう現象を解決する件（Android編）

何とも切ない現象が確認されました。

普通のテキスト文字が勝手に途中で折り返されて表示されるではありませんか！

何じゃコレ？ｗ

簡単に絵で説明するとこんな感じね！

つまり、赤枠で囲んだ部分には本来テキストが伸びて表示されていなければならない領域であるにも関わらず、勝手に変な所で折り返されているという現象で御座います。



原因を調べてみると、スマホ自体の機種の設定が云々と書かれているサイトがありますが、これだと根本的な解決にはなりません。

見る人全てに設定してもらう訳にもいきませんので…。

ちなみにスマホの設定は「ページの自動調整」という項目が設定にあるはずなので、このチェックを外すとこの現象は解決されます。

制作者側ではなく、閲覧だけ行うユーザーはこの設定で良いかもですね。

しかし、作る側はそうはいきませんので…。

で、解決法ですが、2つ方法があります。

まずは、HTML側に直接背景色の指定を行う！というのが1つ。

具体的には、

なんたらかんたら…

といった具合に、直接style指定を行う。

ただ、無駄な記述がHTML側に増えてしまうので、あまりお勧めできないというか、私は嫌かな？ｗ

2つ目の方法ですが、こちらはCSS側に記述します。

先ほどのように対象となる、テキストを囲っている要素に背景を指定するという方法です！

p {
 background-image:url(hogehoge.jpg);
}

コレは例なので、Pに対して定義していますが、沢山こういった表示がある場合は、何かclassを作って定義してしまえば、同じ現象の場面で使い回しが出来るので、この辺りは環境に合わせて臨機応変に対応しましょう！ｗ

あと、画像は何でもOKなので、適当にデザインに影響しないものを選べば大丈夫です。

一応、これで今回の現象は回避できますが、そもそも「何なのこの解決法？」といった感が残りますが、取り合えず結果OKという事で解決済みにしたいと思います！ｗ

変な改行現象が発生した方は、今回の背景指定を試してみてください！

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 著：谷 拓樹