Breaking a new line with an inline block?

Question

I want to remove <br /> and make break lines via CSS. If I change the spaces to display:block , the width will be 100%, and I need the width to be exactly the same text length as it is now. Any suggestions?

 <div class="fullscreen"> <p class="text"> <span class="medium">We</span> <br /> <span class="large">build</span> <br /> <span class="medium">the</span> <br /> <span class="large">Internet</span> </p> </div> .text span { background:rgba(165, 220, 79, 0.8); display:inline-block; padding:7px 10px; color:white; } .fullscreen .large { font-size:80px } 

Feedddle

Answer 1

Remove all br tags and use the style below.

 .text span { background:rgba(165, 220, 79, 0.8); display:table; padding:7px 10px; color:white; } .fullscreen .large { font-size:80px } 

Answer 2

use float: left; and clear: left;

http://jsfiddle.net/rtM6J/

 .text span { background: rgba(165, 220, 79, 0.8); float: left; clear: left; padding: 7px 10px; color: #fff; } 

Answer 3

Set the elements in display: inline and use :after :

 .text span { display: inline } .break-after:after { content: '\A'; white-space:pre; } 

and add the class to your html intervals:

 <span class="medium break-after">We</span> 

Answer 4

I think floats may work best for you here, if you don't want the element to occupy the entire line, float it left should work.

 .text span { background:rgba(165, 220, 79, 0.8); float: left; clear: left; padding:7px 10px; color:white; } 

Note. Remove <br/> before using this course.

Answer 5

If you are not using <p> (only <div> and <span> s), this solution may even allow you to align your inline-block center or right if you want (or just keep them left, as you were asked) . Although the solution may still work with <p> s, I don’t think the resulting HTML would be completely correct, but it’s all the same.

The trick is to wrap each of your <span> with the appropriate <div> . Thus, we use a line break caused by <div> display: block (by default), while maintaining the visual green box to the limits of the text (with the declaration display: inline-block ).

 .text span { background:rgba(165, 220, 79, 0.8); display:inline-block; padding:7px 10px; color:white; } .large { font-size:80px } 

 <div class="text"> <div><span class="medium">We</span></div> <div><span class="large">build</span></div> <div><span class="medium">the</span></div> <div><span class="large">Internet</span></div> </div>