Any whitespace inserted between lines of JSX text gets collapsed

[callmeaponte]

I noticed that an expression (which contains a single space) is automatically inserted inside long lines of JSX text that have inline tags. More specifically, they are inserted as a means of splitting long lines of text that are past the "print width" limit. However React seems to be stripping out this whitespace, rendering it useless.

For example, if this is my input:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <span>tempor</span> incididunt ut labore et dolore magna aliqua.

Then the prettier output is:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod{ ' ' }
<span>tempor</span> incididunt ut labore et dolore magna aliqua.

And my rendered text becomes:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.

... Notice that there is no whitespace between the words "eiusmod" and "tempor". As a temporary workaround I've been manually prepending   to new lines like so:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
&nbsp;<span>tempor</span> incididunt ut labore et dolore magna aliqua.

It would be nice if this could happen automatically, or at least if we could toggle some type of setting to insert   instead of { ' ' }. I'm also to open to any other possible solutions/workarounds, in case I'm missing something.

Also for context, it seems like this feature was added in #1120.

[lydell]

As far as I can tell, React renders that space just fine: https://codesandbox.io/s/mZJoplGYr

[callmeaponte]

Hmm, it must be getting stripped out by something else in the build process. Maybe Babel or Uglify perhaps? As soon as I get some free time I'll try to pin down where it's getting removed and put together a reduced test case for you.

[lydell]

Thanks! Just add a comment here and we'll reopen! :)

[callmeaponte]

Welp, I'm an idiot 🙂

I have display:table in my CSS for that element, which as it turns out, automatically removes any whitespace between child nodes. Switching to display:block eliminates the issue.

I wasn't aware of this CSS rendering behavior until now. The issue can remained closed, sorry for wasting your time!