Question

我的React Material-UI中有以下CardContent

<CardContent className={classes.cardContent}>
  <Typography component="p" className={classes.title} variant="title">
    {this.props.post.title}
  </Typography>
    {this.props.post.photo &&
      (<div className={classes.photo}>
        <img
          className={classes.media}
            src={'/api/posts/photo/'+this.props.post._id}
            />
  </div>)}
  <pre>
    <Typography component="p" className={classes.text}>
      {this.props.post.text}
    </Typography>
  </pre>
</CardContent>

我的问题是，如果我在{this.props.post.text}中有长字符串，则文本不会自动换行以保留在卡片的范围内。相反，它会在卡的边缘被截断。

我该如何包装呢？

Answer 1

就我而言，我没有使用 <pre>我确实使用了 whiteSpace:'pre-wrap'

<Typography  variant="body1" component="div" style={{whiteSpace:'pre-wrap'}} dangerouslySetInnerHTML={createMarkup(this.state.formData.About)} />

Answer 2

这里的问题是<pre>保留了字符串的初始格式，因此，如果它是一长行，则在呈现时将保持这种状态。在这种情况下，线条比卡片的宽度长。

印刷字符串不停留在Material-UI CardContent的范围内

2 个答案: