react-json-view trims all white space from string

Question

I use a "react-json-view" to display a json. The problem is, the library trims all white spaces in delivered strings.

I have a data with valid json:

{
   title: "some title                 end of title"
}

And I receive output in my json component:

{
   title: "some title end of title"
}

Is there a way to get this json in the original shape? In code inspector there is a original json with spaces - only in react-json-view component the data is changed.

Answer 1

What you're looking for is actually html- and CSS based!

I'll assume your react-json-view creates a div with some text in it like so:

<div class="react-json-view">
...
</div>

Now, to fix this, you'll simply need to add a CSS whitespace-modifier to this.

CSS:

.react-json-view {
  white-space: pre-wrap;
}

Source: Multiple Spaces Between Words in HTML without