Типографская строка не остается в границах Material-UI CardContent

Question

В моем React Material-UI есть следующее CardContent

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

Моя проблема в том, что если у меня длинная строка в {this.props.post.text}, то текстне переносить, чтобы оставаться в рамках карты.Вместо этого оно обрезается по краю карты.

Как я могу вместо этого обернуть это?

Answer 1

Проблема здесь в том, что <pre> поддерживает первоначальное форматирование строки, поэтому, если это была одна длинная строка, она останется такой, когда она будет отрисована.В этом случае строка была длиннее ширины карты.