javascript - ReactMaterialUI: How to have whitespace from string be respected? - Stack Overflow

admin管理员组

文章数量:1431985

Attempting to use Typography from Material UI (/)

The goal is to have new lines and spaces from the saved string to be respected.

Such that an example which has leading spaces and new lines would be rendered as:

const svg = d3.select("#chart-area")
   .append("svg")  
   .attr("width", 400)
   .attr("height", 400)

If I just use <Typography>{val}</Typography> then value gets rendered in one line such as:

const svg = d3.select("#chart-area") .append("svg") .attr("width", 400) .attr("height", 400)

Adding {{ whiteSpace: 'pre-line' }} makes Typography at least respect the new lines:

<Typography style={{ whiteSpace: 'pre-line' }}>{val}</Typography>

Rendering the string as

const svg = d3.select("#chart-area")
.append("svg")
.attr("width", 400)
.attr("height", 400)

But how do we have the ponent respect the new line and leading spaces?

Attempting to use Typography from Material UI (https://material-ui./api/typography/)

The goal is to have new lines and spaces from the saved string to be respected.

Such that an example which has leading spaces and new lines would be rendered as:

const svg = d3.select("#chart-area")
   .append("svg")  
   .attr("width", 400)
   .attr("height", 400)

If I just use <Typography>{val}</Typography> then value gets rendered in one line such as:

const svg = d3.select("#chart-area") .append("svg") .attr("width", 400) .attr("height", 400)

Adding {{ whiteSpace: 'pre-line' }} makes Typography at least respect the new lines:

<Typography style={{ whiteSpace: 'pre-line' }}>{val}</Typography>

Rendering the string as

const svg = d3.select("#chart-area")
.append("svg")
.attr("width", 400)
.attr("height", 400)

But how do we have the ponent respect the new line and leading spaces?

• javascript
• html
• reactjs
• material-ui

Share Improve this question Follow asked May 25, 2021 at 23:21 user7858768user7858768 1,05611 gold badge1515 silver badges3232 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I know it's super late and not useful in particular to you anymore, but in case anyone needs a solution for this problem: style={{ whiteSpace: "pre-wrap" }}

From w3schools: "Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks"

With "pre-line" whitespaces collapse into a single whitespace

You could use a preformatted text element instead of <Typography />

<pre>
  const svg = d3.select("#chart-area")
.append("svg")
.attr("width", 400)
.attr("height", 400)
</pre>

本文标签： javascriptReactMaterialUI How to have whitespace from string be respectedStack Overflow