white-space: pre and flexbox

Question

I'm looking to make white-space: pre work inside a display: flex container but it looks as if flexbox prevents white-space: pre from working at all.

The fiddle https://jsfiddle.net/silverwind/dhfkap6e should render the text Lost Whitespace while preserving the flexbox which I use for vertical centering. Any way to combine those two without introducing a wrapper?

Please note for your future questions, that code relevant to your problem belongs directly into your question, not just on an external site. [ask] — misorude, Jul 19 '19 at 07:27

score 0 · Answer 1 · answered Jul 19 '19 at 06:33

0

The white-space CSS property sets how white space inside an element is handled.

Here you have 2 elements, you have to specify margin or padding on your flex items or you can add a space inside your span tags

<span>Lost_</span>

answered Jul 19 '19 at 06:33

KeiZ

31
6

score -1 · Answer 2 · answered Jul 19 '19 at 05:08

-1

Try this.

div {
  white-space: pre;
  height:100px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<div>
  <span>Lost</span> <span>Whitespace</span> 
</div>

answered Jul 19 '19 at 05:08

Sumit Patel

4,530
1
10
28

white-space: pre and flexbox

2 Answers2