制作のご相談はこちら
PCとスマートフォンでテキスト改行位置を変更する方法【レスポンシブデザイン】

公開日 : 2017年09月11日 / 最終更新日 : 2018年11月05日

PCとスマートフォンでテキスト改行位置を変更する方法【レスポンシブデザイン】


レスポンシブWEBデザインの場合、テキストの長さによってはPCとスマホで改行位置を変えたい場合ありませんか?
キリの悪い部分で改行してしまうとかえって読みづらくなってしまうので、改行位置を変える簡単な方法を書いていきます。

brタグをmediaqueryで制御する

シンプルですが、brタグにclassを追加して、mediaqueryで制御するのがよいかと思います。
上記の例では、通常(PC)ではbrをdisplay:none;で隠して、画面幅が小さくなったらdisplay:block;で見せるというイメージです。

ぜひお試しください。