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

<span>タグにdisplay:blockをかけることにより、PC版とスマホ版で改行箇所を変更することができる。

スマホ版で改行する例

改行したい箇所を<span>タグで囲う

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

display:blockをかけることにより、spanがblock要素に変わる。すると<span>タグの上下に改行が入る。

@media screen and (max-width:767px) {
    p span {
        display: block;
    }
}