【CSS】ボタンの中にあるテキストを2行にする方法

今回は、「ボタンの中にあるテキストを2行にする方法」について紹介します。

よくある実装なので、是非抑えておきたいところですね。

spanでテキストを2行にする方法

spanでテキストを2行にする方法です。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.

HTML

<div class="button">
    <a href="">
        <span>
            大阪市行政オンラインシステム
            <span>（外部サイトへのリンク）</span>
        </span>
    </a>
</div>

CSS（scss）

.button {
    a {
        display: inline-block;
        max-width: 350px;
        width: 100%;
        background-color: blue;
        color: #fff;
        padding: 10px 20px;
        font-size: 16px;
        text-align: center;
        line-height: 1.3;
        text-decoration: none;
        span {
            span {
                display: inline-block;
            }
        }
    }
}

spanの中にさらにspanを入れ、改行したいspanに対して「display: inline-block;」を指定することで、ボタンの中にあるテキストを2行にすることが出来ます。

brでテキストを2行にする方法

brでボタンの中にあるテキストを2行にする方法です。

See the Pen
Untitled by ゆーじろー (@yuji64)
on CodePen.

HTML

<div class="button">
    <a href="">
        <span>
            大阪市行政オンラインシステム<br>
            （外部サイトへのリンク）
        </span>
    </a>
</div>

単純に、spanの中にあるテキストをbrで改行したらOKです。

CSS

.button {
    a {
        display: inline-block;
        max-width: 350px;
        width: 100%;
        background-color: blue;
        color: #fff;
        padding: 10px 20px;
        font-size: 16px;
        text-align: center;
        line-height: 1.3;
        text-decoration: none;
    }
}

まとめ

以上が、「ボタンの中にあるテキストを2行にする方法」でした。

関連記事:

【CSS】擬似要素を使ってボタンの右端に矢印アイコン「→」を作成する方法 ヒッチハイクのコツまとめ7つ！３２台乗って分かったこと。 【CSS】display: flex;とmargin: auto;を使って要素の高さを揃える方法 【CSS】aタグをクリックできる範囲をheaderの高さと一緒にする方法