javascriptjsonreactjsstringjson-view

react-json-view trims all white space from string

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.

Solution

  • 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 &nbsp;