如何使用CSS在span中插入换行符？

Question

现在我想在Q1上打破这一行并将此Q1移到摘要旁边。有办法吗？以下是按钮的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;
}

Answer 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);

    });

});

Answer 2

使用

display:block;

OR
span是内联元素，因为width或margin等样式属性不起作用。您可以通过将span更改为块元素（例如div）或使用填充来修复此问题。