reactjs React/材料UI：如何使字符串中的空格得到尊重？

gcuhipw9 于 2022-12-03 发布在 React

关注(0)|答案(2)|浏览(160)

正在尝试从材料UI使用排版（https://material-ui.com/api/typography/）
目标是使保存的字符串中的新行和空格得到遵守。
使得具有前导空格和新行的示例将呈现为：

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

如果我只使用<Typography>{val}</Typography>，那么value将在一行中呈现，例如：

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

添加{{ whiteSpace: 'pre-line' }}可使“排版”至少考虑新行：

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

将字符串呈现为

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

但是，我们如何让组件遵守新行和前导空格？

2条答案

您可以使用preformatted text element来代替<Typography />

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

我知道这是超级晚了，没有有用的，特别是对你了，但如果有人需要一个解决这个问题的办法：style={{ whiteSpace: "pre-wrap" }}
来自w3schools：浏览器保留空白.必要时文本将换行，并在换行符处换行.
使用“行前”空格将其折叠为单个空格