Display flex is omitting spaces around the text value given in a span tag

user_13246563 0
Viewed 85

I have created a demo, passing value with spaces around, defined two elements (p tag) in the HTML file, one with flex property and another without. An element with flex property showing the value without space in the HTML file and another one is simply displaying the actual value including space.

How to display actual value coming from JS file in the element with flex property?

UPDATE: I want to understand why is the flex property removing the space from the value?

var value = " is ";
document.getElementById('value').innerHTML = value;
document.getElementById('value1').innerHTML = value;
.flex{
  display: flex;
}
<p class="flex">
 <span>This</span>
 <span id='value'>value</span>
 <span>hello</span>
</p>

<p>
 <span>This</span>
 <span id='value1'>value</span>
 <span>hello</span>
</p>

flexbox sass css javascript
1 Answers

For a more in-depth answer, please check out @Orial's post.
CSS flex box last space removed

The white-space processing model tells us:

If a space (U+0020) at the end of a line has white-space set to normal, nowrap, or pre-line, it is also removed.

To prevent this, use white-space: pre-wrap;:

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

Demo:

var value = " is ";
document.getElementById('value').innerHTML = value;
document.getElementById('value1').innerHTML = value;
.flex{
  display: flex;
  white-space: pre-wrap;
}
<p class="flex">
 <span>This</span>
 <span id='value'>value</span>
 <span>hello</span>
</p>

<p>
 <span>This</span>
 <span id='value1'>value</span>
 <span>hello</span>
</p>

user_56255470
Related