为何相同代码在React与原生JS中渲染span（white-space:nowrap）结果不同？

Great question! Let’s unpack exactly why you’re seeing this rendering gap between vanilla HTML/JS and React when using white-space: nowrap on <span> elements.

The Vanilla HTML/JS Behavior #

In your vanilla setup, the HTML structure looks like this:

<div>
  <span> lorem ipsum dolor </span>
  <span> lorem ipsum dolor </span>
  <span> lorem ipsum dolor </span>
</div>

Browsers treat whitespace (newlines, spaces, tabs) between inline elements like <span> as a single space character. Even with white-space: nowrap on the spans, those spaces between the spans are preserved. So your three spans end up sitting on a single line with a small space gap between each one—exactly what you’d expect from standard HTML rendering.

The React JSX Behavior #

React’s JSX compiler has a key difference here: it automatically strips out whitespace between elements to clean up the rendered output. In your React component:

class App extends React.Component{
  render() {
    return (
      <div>
        <span> lorem ipsum lorem ipsum </span>
        <span> lorem ipsum lo... </span>
        {/* More spans here */}
      </div>
    );
  }
}

The newlines and spaces you’ve added between the <span> tags in your JSX get removed during compilation. That means the spans are rendered directly adjacent to each other, no space in between. With white-space: nowrap, this makes their content look like it’s merged into one continuous block, which is why it looks different from the vanilla version.

How to Fix the Gap (If You Want Matching Behavior) #

If you want React to render spaces between spans like vanilla HTML does, you have a few options:

• Insert explicit space characters using {' '} between spans:

  <div>
    <span> lorem ipsum lorem ipsum </span>{' '}
    <span> lorem ipsum lo... </span>{' '}
  </div>
  

• Use the non-breaking space entity   (though this creates unbreakable spaces, which might not always be ideal):

  <div>
    <span> lorem ipsum lorem ipsum </span>&nbsp;
    <span> lorem ipsum lo... </span>&nbsp;
  </div>
  

• Add margin to the spans via CSS (a more flexible, maintainable approach):

  span {
    white-space: nowrap;
    margin-right: 0.5em;
  }
  

Bottom Line #

The core issue boils down to JSX’s whitespace handling vs. native HTML’s whitespace rules. React strips inter-element whitespace by default to avoid unintended layout gaps, while native HTML collapses consecutive whitespace into a single space. That’s why your white-space: nowrap spans look different across the two setups!

内容的提问来源于stack exchange，提问作者Rob