Material-ui: Material-UI Paper组件无法识别换行符

创建于 2017-11-17 · 5评论 · 资料来源: mui-org/material-ui

我正在向Material-UI Paper组件传递一个包含换行符的字符串。但是，Paper组件似乎没有理会它，因为它没有开始新的一行。这是故意的行为，还是错误。有问题的代码在下面（comment.text是有问题的字符串）：

<Paper key={index} rounded={false} style={styles.paper}> 
<div>{comment.text}</div> 
<div style={{textAlign: 'right', color: grey500}}>{comment.user + ", " + comment.date}</div> 
</Paper>

question

资料来源

alexanderwhatley

最有用的评论

我使用了： style={{whiteSpace: 'pre-line'}}

<Typography
  variant="body1"
  style={{whiteSpace: 'pre-line'}}
>
  {body}
</Typography>

参考：
https://stackoverflow.com/questions/39325414/line-break-in-html-with-n

ericksprengel 于 2019-02-24

👍70 ❤14 🚀4 🎉4 👀2

所有5条评论

@alexanderwhatley comment.text的值是多少？您正在使用哪个版本的所有内容？我们提供的模板旨在帮助您更有效地回答问题。 😁

m2mathew 于 2017-11-17

嘿@ m2mathew ，对此感到抱歉。 material-ui的版本为0.17.4，comment.text的值为“嗨，你好吗？”。

alexanderwhatley 于 2017-11-17

好吧，考虑一下DOM如何处理这个问题。如果我将\n放在HTML文件中的两个<div>之间，我希望可以渲染。

由于这与MUI无关，所以我将关闭此问题。请务必前往Stack Overflow或类似网站，以获取有关在DOM中实现内容的更多帮助。

m2mathew 于 2017-11-17

👍1

我使用了： style={{whiteSpace: 'pre-line'}}

<Typography
  variant="body1"
  style={{whiteSpace: 'pre-line'}}
>
  {body}
</Typography>

参考：
https://stackoverflow.com/questions/39325414/line-break-in-html-with-n

ericksprengel 于 2019-02-24

👍70 ❤14 🚀4 🎉4 👀2

似乎值得在“版式”组件上进行额外的支持。

goodwin64 于 2019-12-05

👍12

此页面是否有帮助？

0 / 5 - 0 等级

Material-ui: Material-UI Paper组件无法识别换行符

最有用的评论

所有5条评论

相关问题