文章の改行位置をいいかんじにするCSS

レスポンシブな画面の作りかたをしていると、幅がせばまったときに改行されてほしくないところで改行されてしまうことがよくある。

蒼く透き通った空と瀬戸内の柔ら // ここで要素の幅いっぱいになる
かな波の音

とくにキャッチコピーやリード文など印象的にみせたい文章でこまる。レスポンシブでもほどほどにきれいな改行を得るための作戦を2つ紹介したい。

inline-blockを使う

古典的にはinline-blockを使う手法がある。

<p>
    <span>蒼く</span>
    <span>透き通った</span>
    <span>空と</span>
    <span>瀬戸内の</span>
    <span>柔らかな</span>
    <span>波の音</span>
</p>
span {
    display: inline-block;
}

結果:

蒼く 透き通った 空と 瀬戸内の
柔らかな 波の音 // 「柔らかな」が分割されない

残念ながらspanごとに改行するとスペースがはさまってしまうので、改行せずに書く必要がある。

<p>
    <span>蒼く</span><span>透き通った</span><span>空と</span><span>瀬戸内の</span><span>柔らかな</span><span>波の音</span>
</p>

結果:

蒼く透き通った空と瀬戸内の
柔らかな波の音

flexboxを使う

もう一つの方法はflexboxを使う。

<p>
    <span>蒼く</span>
    <span>透き通った</span>
    <span>空と</span>
    <span>瀬戸内の</span>
    <span>柔らかな</span>
    <span>波の音</span>
</p>
p {
    display: flex;
    flex-wrap: wrap;
}

こっちのほうがわかりやすいかも。flexboxの場合はHTML上で改行していても隙間が空くことはない。

詳細に指定する

すこし話がややこしくはなるが、入れ子にすることもできる。もっと細かな指定が可能だ。

<p>
    <span>
        <span>蒼く</span>
        <span>透き通った</span>
        <span>空と</span>
    </span>
    <span>
        <span>瀬戸内の</span>
        <span>柔らかな</span>
        <span>波の音</span>
    </span>
</p>
span {
    display: inline-block;
}
// or
p,
p > span {
    display: flex;
    flex-wrap: wrap;
}

結果:

蒼く透き通った空と
瀬戸内の柔らかな波の音

指定しないほうが読みやすい場合も

モバイル端末のような画面幅がせまいときは、改行位置を指定するよりは流してあったほうが読みやすいこともある。どちらがよいかは文字サイズや内容にもよるので一概には言えないけれど、もし流したほうが読みやすいという場合は、素直にinlineにするなりflexboxをやめればよい。

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

https://jsfiddle.net/murata_s/s7zd1o3m/latest/