How to insert line break in the span?

Question

Now I want to split the line into Q1 and move this Q1 next to Summary. Is there any way to do this? Below is the CSS for the button.

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

Try adding:

display: inline-block;

Note: this may slightly change the behavior.

in html:

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

You can also use js for a more dynamic approach:

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

and you can use jQuery for this:

$(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

Use

display:block;

OR
spanis an inline element because style attributes such as widthor margindo not work. You can fix this by either changing spanto a block element (for example, div), or using a space instead.