React Material-UI中的排版
React Material-UI中的排版
提问于 2018-09-23 14:57:12
我有一个文本框：
<Typography component="p" className={classes.text}>
{this.props.post.text}
</Typography>我希望能够包括段落，但输入的所有文本都打印在一行上。
文档建议paragraph缺省为false，所以我必须将其设置为‘`true’。
我尝试过以下几种方法：
<Typography component="p" className={classes.text} paragraph="true">我也试过了：
<Typography component="p" className={classes.text} paragraph={true}>两者都不起作用，所以我的所有文本仍然打印到一行。
如何让段落显示出来？
补充信息：据我所知，字体中的paragraph={ adds a bottom-margin to the whole text }属性就是真的。例如，我的一段文字是一个段落。如果我想要另一个段落，我必须添加另一个Typography。类似于：
<Typography component="p" className={classes.text} paragraph={true}>
{this.props.post.text}
</Typography>
<Typography component="p" className={classes.text} paragraph={true}>
{this.props.post.text2}
</Typography>这不完全是我想要的。也许我的目标应该是让我的输入文本中的回车字符得到识别。这是正确的吗?如果是正确的，它是如何做到的？
我试过这个：
<pre>
<Typography component="p" className={classes.text}>
{this.props.post.text}
</Typography>
</pre>标记保留了标记内部的空格和换行符。
不过，这并不合适。如果我有很长的线条，文本不会在卡片宽度处换行。相反，超出卡片宽度的任何内容都会被截断。很明显我想要所有的东西。我希望我的文本在卡片中换行，并支持新的行和段落。这是怎么做的？
回答 6
Stack Overflow用户
回答已采纳
发布于 2019-01-13 22:54:56
对于新段落
<Typography>
{this.props.text.split("\n").map((i, key) => {
return <p key={key}>{i}</p>;
})}
</Typography>仅用于新行
<Typography>
{this.props.text.split("\n").map((i, key) => {
return <div key={key}>{i}</div>;
})}
</Typography>Stack Overflow用户
发布于 2020-12-21 07:43:58
更好的方法是使用css的强大功能：
white-space: pre-line如果使用此css属性，则将使用“新行”字符。
Stack Overflow用户
发布于 2018-10-07 19:07:11
我想出了这个：
<Typography component="p" className={classes.text}>
{this.props.post.text.split("\n").map((i, key) => {
return <p key={key}>{i}</p>;
})}
</Typography>如果有更好的方法来做这件事，我很想听听。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52463765
复制相关文章
相似问题