Bug: HTML snippet with spans is rendered vastly different in React than in plain HTML

[mindreframer]

A list of span elements in combination with Tailwind.css styles (any version, CDN / NPM / etc) is rendered very differently in plain HTML vs. React.js code.

Links to code examples:

• https://github.com/mindreframer/select-text-react-bug
• https://codesandbox.io/s/trusting-tdd-f0qbi?file=/public/index.html

The current behavior

There are no spaces, the word-wrapping is broken and selecting + copying text results in mangeled text in the clipboard.

The expected behavior

It should behave similarly to the plain HTML version: have spaces, render without strange word-wraps and be properly selectable.

Screenshot:

[eps1lon]

Thanks for the report.

This is intentional behavior of JSX. Though in your particular case undesired. #1643 and #4134 should give you an overview on why this is intended by React.

Ultimately, you can reproduce the HTML behavior with

 <span>In</span>
+{"\n"}
 <span>PARADISE</span>

[mindreframer]

@eps1lon Interesting... Thanks for the quick response and the provided workaround!