ditto ditto - 4 months ago 7
CSS Question

Breaking to a new line with inline-block?

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

Remove all br tags and use below style.

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