Breaking to a new line with inline-block?

Question

I want to remove the
\'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 w

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:

Like a default table.
null

Notice the element doesn't flow inline with the 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 . Anyway, this is the same as the table, but the table has the added benefit of always forming to the width of its content.