SajjadZare
SajjadZare

Reputation: 2378

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: enter image description here

I want to show like this (means have line breaking) enter image description here

Upvotes: 0

Views: 85

Answers (2)

SajjadZare
SajjadZare

Reputation: 2378

You should add this line to your CSS

word-wrap: break-word;

Upvotes: 1

Will
Will

Reputation: 3241

CSS white-space.

<p style="white-space: nowrap">I'm a big long line that won't wrap. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>

<p>I'm a big long line that wraps. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>

Upvotes: 1

Related Questions