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

Question

I want to be able to handle user provided text with newlines and simultaneously text which may be wider than the width of parent elements. By wider than the parent element, I mean something like a single word or line longer than the screen.

I have added 'white-space': 'pre-wrap' as well as 'overflow-wrap': 'break-word'. The white-space handles newlines, but overflow-wrap does not break long words/lines. I've also tried 'word-wrap': 'break-word' with no luck.

This is all in React.js. Outside of React.js I would just wrap it in a <pre>.

Ex:

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

I've also tried converting the text variable to a string literal:

<p>{`${text}`}</p>

Answer 1

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>