How to Use Whitespace: 'Pre-Wrap' on React

How to use whiteSpace: 'pre-wrap' on React

JSX collapses whitespaces, in this case you can use dangerouslySetInnerHTML like so

var Component = React.createClass({
  content() {
    const text = `
      keep formatting

      keep spaces
   `;

    return { __html: text };
  },

  render: function() {
    return <div 
      style={{ whiteSpace: 'pre-wrap' }} 
      dangerouslySetInnerHTML={ this.content() } 
    />
  }
});

Note: For new versions of React/JSX, there is no need to use dangerouslySetInnerHTML

const App = () => (  <div style={{ whiteSpace: 'pre-wrap' }}>    {`      keep formatting
      keep spaces

      keep spaces   `}  </div>);
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="root"></div>

React: Inserting a line break in localised text

In order to respect \n, you can add a style of white-space: pre-line or white-space: pre-wrap.

In React, it would look like this:

return (
    <div className="App">
      <p style={{ whiteSpace: "pre-line" }}>{txt.fname}</p>
    </div>
  );

Here is a forked sandbox.

Best practice when adding whitespace in JSX

Because   causes you to have non-breaking spaces, you should only use it where necessary. In most cases, this will have unintended side effects.

Older versions of React, I believe all those before v14, would automatically insert <span> </span> when you had a newline inside of a tag.

While they no longer do this, that's a safe way to handle this in your own code. Unless you have styling that specifically targets span (bad practice in general), then this is the safest route.

Per your example, you can put them on a single line together as it's pretty short. In longer-line scenarios, this is how you should probably do it:

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    <span> </span>
    So much more text in this box that it really needs to be on another line.
  </div>

This method is also safe against auto-trimming text editors.

The other method is using {' '} which doesn't insert random HTML tags. This could be more useful when styling, highlighting elements, and removes clutter from the DOM. If you don't need backwards compatibility with React v14 or earlier, this should be your preferred method.

  <div className="top-element-formatting">
    Hello <span className="second-word-formatting">World!</span>
    {' '}
    So much more text in this box that it really needs to be on another line.
  </div>

CSS 'overflow-wrap' does not work in React.js

In React, inline style should be camelCased.

The React document style section also mention:

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.

Try to modify as following:

<div class="request-top" style={{whiteSpace: 'pre-wrap', overflowWrap: 'break-word'}}>
   <p>{text}</p>
</div>

Preserve space in React rendered element

I am not sure if React JS messes up the space as it's just HTML. Use the following CSS on the element:

white-space: pre-wrap;

Working Demo: wmnk7rmq8 - CodeSandbox

Why react doesn't render whitespaces

You'll be able to display only whitespace by using the white-space property:

function App() {
    return <h1 style={{ whiteSpace: "pre-wrap" }}>{" "}</h1>;
}

ReactDOM.render(<App />, document.getElementById("root"));

h1 { /* so we can see the h1 */
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

---

Related Topics