PCとSPで改行位置を変更する

PCとSPで改行位置を変更したいことがよくあるので、設定方法をメモ。

サンプルコード

PCのみ改行したい場合は.br-pcを、SPのみ改行したい場合は.br-spをbrに付けるようにします。

<p>あの薄暗い森で、自分のこともわからなった世界で、<br class="br-pc">ただ暴れまわることしか考えられなかったレムを助けに来てくれたこと。<br>
目を覚まして動けないレムを、魔法を使いすぎて疲れきった姉様を、<br class="br-pc">逃がすために囮になって魔獣に立ち向かっていってくれたこと。</p>

<p>勝ち目なんてなくて。<br class="br-sp">命だって本当に危なくて。<br class="br-sp">それでも生きのこって。<br>
温かいまま、レムの腕の中に<br class="br-sp">戻ってきてくれたこと。</p>

767px以下をSP、768px以上をPCとして、以下のように設定します。

@media screen and (max-width: 767px) {
	br.br-pc {
		display: none !important;
	}
} /* max-width: 767px END */

@media screen and (min-width: 768px) {
	br.br-sp {
		display: none !important;
	}
} /* min-width: 768px END */

.br-pcは767px以下で非表示、.br-spは768px以上で非表示になるようにしています。
改行位置を変更するデモページ