Now I want to break the line on Q1 and move this Q1 next to Summary. Is there a way to do it? Following 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; }
Try adding: display: inline-block; Note: it may change the behavior a bit.
The <span> tag is an inline container used to mark up a part of a text, or a part of a document. The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute. The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
The <br> HTML element produces a line break in text (carriage-return).
Try adding:
display: inline-block;
Note: it may change the behavior a bit.
in the html:
<span>JAN-MAR <br /> Q1 Summary</span>
You may also use js, for a more dynamic approach:
<span class="q-span">JAN-MAR Q1 Summary</span>
and you can use jQuery to do it:
$(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); }); });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With