How do I display a wrapped json string?

Question

I am making a proof-of-concept React app that retrieves data from the GitHub api. The app displays the data retrieved from GitHub as a json string inside a paragraph element.

Problem

The json string doesn't wrap. It overflows to the right on several lines.

What I want

Wrapping on each "word" doesn't make sense, because json doesn't really have words. I want the string to break before individual characters overflow.

What I've tried

• Variations of word-wrap, and overflow-wrap
• Variations of text-overflow

Answer 1

The json string doesn't wrap. It overflows to the right on several lines.

Solution

The property/value combo that wound up working was word-break: break-all.

<p style={{wordBreak: 'break-all'}}>{JSON.stringify(data)}</p>