Breaking to a new line with inline-block?

Question

I want to remove the <br />'s and do the break lines through CSS. If I change the spans to display:block the width will go 100% and I need the width to be exactly the length of the text, like 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 } 

Fidddle

Answer 1

Remove all br tags and use display: table.

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

Explanation: The table wraps the width of its content by default without setting a width, but is still a block level element. You can get the same behavior by setting a width to other block-level elements:

<span style="display:block;border:1px solid red;width:100px;">Like a default table.</span> <code>null</code> 

Notice the <code> element doesn't flow inline with the <span> like it would normally. Check it out with the computed styles in your dev tools. You'll see pseudo margin to the right of the <span>. Anyway, this is the same as the table, but the table has the added benefit of always forming to the width of its content.

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; }