Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to insert a line break in span using CSS? [closed]

Tags:

Button created using span

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; } 
like image 294
Suhas Deshpande Avatar asked Jun 30 '15 03:06

Suhas Deshpande


People also ask

How do you add a line break in span?

Try adding: display: inline-block; Note: it may change the behavior a bit.

Can we apply CSS on span?

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.

How do I make a div break line?

The <br> HTML element produces a line break in text (carriage-return).


1 Answers

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);      });  }); 
like image 132
Philll_t Avatar answered Sep 17 '22 20:09

Philll_t