Material-UI CardContent not rendering the jump lines

Viewed 81

I have a component that renders a Material-UI Card, it receives a string like this:

'This
is
a
test'

But it renders 'This is a test' in one single line. I tried this:

<Card>
  <CardContent>
     <Typography noWrap>{value}</Typography>
  </CardContent>
</Card>

and

<Card>
  <CardContent>
     {value}
  </CardContent>
</Card>

both of them renders the value in a single line, however, if I console.log(value); then it shows the message as expected on the console.

How to overcome this?

1 Answers

You can use white-space: pre to force the text to go to the next line on newline character:

<Typography whiteSpace="pre">

Codesandbox Demo

Related