frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【CSS】スマホでのみ改行させたい

スポンサードリンク


スポンサードリンク


スマホ向けに改行したりしないようにしたりというのはレスポンシブデザインではあるあるです。

やり方は簡単でbr要素にcssをあててメディアクエリで表示・非表示を切り替えるだけです。
もちろんPCのwindowサイズでも改行するしないを指定できます。

<p>改行したい<br class="content_sp">改行したい</p>
@media screen and (max-width:768px) {
	.content_pc{
		display: none;
	}
	.content_sp{
		display: block;
	}
}

デモ


See the Pen
ROgMrW
by funclur (@funclur)
on CodePen.


注意点

注意点としては以下です。

  • あまりやりすぎるとカオスになる
  • 動的に吐き出されるソースには適応できない

LPの見出しなど見た目に重きを置いてる箇所での限定的な使い方にするといいです。