レスポンシブ対応のホームページを作る際に、よくある文章の改行位置問題。
パソコンで見たときはいい感じに改行されているのに、 スマートフォンで見たときには、おかしな位置で改行されている。。。
どちらで見た場合もきれいに改行されるよう、ブレークポイントで改行を制御するサンプルです。
画面サイズ768pxを基準に改行位置を切り替えます。
使用するclass名
.sp：画面サイズがxsより小さい時に改行します。
.pc：画面サイズがmsより大きい時に改行します。
View
テキストの改行位置を指定します。
xsの時はここから改行します。
sm以上の時はここで改行します。
Source
1 | テキストの改行位置を指定します。<br class="sp">xsの時はここから改行します。<br class="pc">sm以上の時はここで改行します。 |
1 2 3 4 5 6 7 8 9 10 11 | /* ==================================================== 改行位置 ==================================================== */ @media print, screen and (min-width: 768px) { br.sp { display: none; } br.pc { display: inline; } } @media screen and (max-width: 767px) { br.sp { display: inline; } br.pc { display: none; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /* ==================================================== 改行位置 ==================================================== */ @media print, screen and (min-width: 768px) { br { &.sp {display:none;} &.pc {display:inline;} } } @media screen and (max-width: 767px){ br { &.sp {display:inline;} &.pc {display:none;} } } |