CODEWITHSUNDEEP
javascriptcssreactjs
Rob
Rob

Reputation: 3499

Why does the same code renered in React and in plain CSS provide different results:

I am experimenting with span and nowrap and I'm getting different results in vanilla JS and React.

For example, with this css:

span {
  white-space: nowrap;
}

using this in regular javascript:

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

vs.

class App extends React.Component{
  render() {
    return (
      <div>
        <span> lorem ipsum lorem ipsum </span>
        <span> lorem ipsum lorem ipsum </span>
        <span> lorem ipsum lorem ipsum </span>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

In React, it won't wrap the span's to the next line. Is this a bug or is the behavior expected to be different? How would I get the react to mimic the behavior of the css.

In React, it never wraps. In Vanilla JS, it wraps each statement as a block, which is the desired behavior.

(edited)jsbin's for reference:

1)https://jsbin.com/zuwonirape/edit?html,css,js,output

2)https://jsbin.com/poqezobevo/1/edit?html,css,js,output

Upvotes: 2

Views: 235

Answers (2)

Lucas Kellner
Lucas Kellner

Reputation: 441

Oblosys is right, if you go back to your HTML and take out the line breaks so that you have 

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

You will see that it renders like it does in React - because this is what your JSX compiles to.

My suggestion is to apply the inline-block style to your span elements:

span {
  display: inline-block;
}

see how that looks: https://jsbin.com/ponidij/edit?html,css,js,output

Upvotes: 2

Oblosys
Oblosys

Reputation: 15136

This is not CSS issue, but is caused by the way JSX handles whitespace, which is slightly different from normal html.

According to the JSX In Depth React guide:

JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space.

So App gets rendered as 

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

which won't break between the spans.

To replicate the behavior of the html fragment, you can add some explicit spaces:

render() {
  return (
    <div>
      <span> lorem ipsum lorem ipsum </span>{' '}
      <span> lorem ipsum lorem ipsum </span>{' '}
      <span> lorem ipsum lorem ipsum </span>
    </div>
  );
}

Upvotes: 4

Related Questions