Remove line breaks without making spans blocks

Question

Is there any CSS property/solution to prevent the need of a <br> between every <span>?

For example, instead of having:

  HTML
<span>a</span>
<br>
<span>b</span>
<br>
<span>c</span>

Have something like this:

  CSS
span{break-line:true}

  HTML
<span>a</span>
<span>b</span>
<span>c</span>

I know I can use display:block but I don't want to change the span's size.
One example to why that would be bad is color the background of the span.

Answer 1

You can use float and clear on them:

span {
float: left;
clear: both;
background: #ddd;
}

<span>a</span>
<span>b</span>
<span>c</span>

Answer 2

You can use the :after pseudo-element with white-space: pre;

span:after {
  content: '\A'; /* a newline */
}
span {
  white-space: pre;
}

<span>a</span>
<span>b</span>
<span>c</span>