☰

CSS を使用して span に改行を挿入するにはどうすればいいですか? [closed] 質問する

tag-icon • tag-icon html css
CSS を使用して span に改行を挿入するにはどうすればいいですか? [closed] 質問する

spanを使用して作成されたボタン

ここで、Q1 で改行し、この Q1 を Summary の横に移動したいと思います。これを行う方法はありますか? 以下はボタンの CSS です。

span {
    display: inline-block;
    font-size: 80%;
    line-height: normal;
    width: 100%;
    line-height: 2rem;
    border: 1px solid #019ed5;
    border-radius: 25px;
    cursor: pointer;
}

ベストアンサー1

以下を追加してみてください:

display: inline-block;

注意: 動作が少し変わる可能性があります。

html 内:

<span>JAN-MAR <br /> Q1 Summary</span>

より動的なアプローチとして、js を使用することもできます。

<span class="q-span">JAN-MAR Q1 Summary</span>

jQuery を使ってこれを実行できます:

$(document).ready(function(){
    $(".q_header").each(function(){
        // Get content
        var 
            content = $(this).text(),
        // get first word
            first_w = content.match(/([\w\-]+)/);

        // replace the first word with first word and break
        var new_cnt = content.replace(first_w[0], first_w[0] + "</br>");

        // add the css to make it inline-block
        $(this).css("display", "inline-block").html(new_cnt);

    });

});

おすすめ記事