CODEWITHSUNDEEP
css
Math
Math

Reputation: 39

Remove line breaks without making spans blocks

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.

Upvotes: 3

Views: 45

Answers (2)

j08691
j08691

Reputation: 208030

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>

Upvotes: 2

Johannes
Johannes

Reputation: 67814

You can use float and clear on them:

span {
float: left;
clear: both;
background: #ddd;
}
<span>a</span>
<span>b</span>
<span>c</span>

Upvotes: 2

Related Questions