span {
background-color: red;
}
.only-whitespace {
display: inline-flex;
white-space: pre;
}
.trailing-whitespace {
display: inline-flex;
white-space: pre;
}only whitespace: <span class="only-whitespace"> </span>
<br/>
trailing whitespace: <span class="trailing-whitespace"> a </span>What stands out in the above example is that the flexbox element with the white-space: pre style retains trailing whitespaces but not standalone whitespaces. Is there a way to preserve these whitespaces without having to set the width property or anything else? Let me know your thoughts.