排版字符串不在 Material-UI CardContent 的范围内

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> 保持字符串的初始格式，所以如果它是一长行，它在呈现时将保持原样。在这种情况下，线长于卡片的宽度。

Answer 2

在我的例子中，我没有使用 <pre>我确实使用了 whiteSpace:'pre-wrap'

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

排版字符串不在 Material-UI CardContent 的范围内

Typography String does not stay withing bounds of Material-UI CardContent

javascript

typography

reactjs

material-ui