CSSを使ってスマホ版とPC版の文章の改行箇所を変える

<br>タグにclass名を振ってあげて、display:none;display:block;を使ってあげることにより、

スマホ版、PC版で改行箇所を変更することができる。

スマホ版で改行する例

HTMLでは<br>タグにclass名を振ってあげる

<p>
    つれづれなるまゝに、日暮らし、<br class="br-sp">硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、<br class="br-sp">あやしうこそものぐるほしけれ。 
</p>

CSSで画面サイズにより出し分ける

.br-sp {
    display: none;
}

@media screen and (max-width:767px) {
    .br-sp {
        display: block;
    }
}
タイトルとURLをコピーしました