0

I have a flexbox container that uses white-space: pre formatting and contains some whitespace-only text nodes. However unless the whitespaces are wrapped in a span these are not displayed. Why is this happening and could I make it work without using the extra spans?

(btw. I am using flexbox to make some other elements grow to full width of the container)

.container {
  display: flex;
  white-space: pre;
}

.red {
  color: red;
}

.blue {
  color: blue;
}
<div class="container">
<span>    </span><span class="red">foo</span><span>    </span><span class="blue">bar</span>
</div>
<div class="container">
    <span class="red">foo</span>    <span class="blue">bar</span>
</div>

https://jsfiddle.net/6zrm81tk/1/

GucciBananaKing99
  • 1,473
  • 1
  • 11
  • 31
Radim Vansa
  • 5,686
  • 2
  • 25
  • 40
  • Why don't you use ` ` for spaces in between `span` tags? – Numan Ashiq Apr 30 '21 at 08:54
  • Hmm, I could do that - it's questionable though whether it is any better than wrapping the spaces inside span element. But TBH in reality I use pre-wrap (doesn't matter in this example) and if a line happens to be too long I'd prefer to wrap it. The application is actually emulating a terminal, reading input/output over websocket and then using ansi_up to convert ANSI sequences into HTML. – Radim Vansa Apr 30 '21 at 10:47

0 Answers0