排版字符串不受 Material-UI CardContent 的限制

Question

I have the following CardContent in my React Material-UI

<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>

My problem is that if I have long string in {this.props.post.text} the text does not wrap to stay within the bounds of the card. Instead it gets truncated at the edge of the card.

How can I get this to wrap instead?

Answer 1

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

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

 

Answer 2

The problem here is that <pre> maitains the initial formatting of the string, so if it was one long line, it will remain that way when it is rendered. In this case the line was longer than the width of the card.