Show Html text in React without line breaking

I have an Html text and want to show it in a div like below

<div dangerouslySetInnerHTML={{ __html: THETEXT }} />

It shows in one line without any breaking, what should I do for showing in correct way with line breaking?

Html Text:

<p><span style="color: rgb(26, 26, 27);">&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a&nbsp;for&nbsp;a</span></p>

Now show like this:

I want to show like this (means have line breaking)

>Solution :

You should add this line to your CSS

word-wrap: break-word;