multiline with <ListItemText>

Question

CODEPEN: https://codesandbox.io/s/94lw648lmo?fontsize=14

I have been using Material-ui with react.

I'm trying to make a list that contains long text.

When long text is given text is shown like the picture but, I want multiline text.

Here is my code snippet of it.

<List>
  {this.props.novels.map((novel, index) => (
  <ListItem alignItems="flex-start" key={index} role={undefined}>
    <ListItemText primary={<span>{novel.text}</span>} />
  <ListItemSecondaryAction>
    <Button>
      <ThumbUp />
    </Button>
    <span>{novel.like}</span>
    <Button>
      <ThumbDown />
    </Button>
    <span>{novel.dislike}</span>
  </ListItemSecondaryAction>
  </ListItem>
))}
</List>

Please let me know if you need more info.

Thanks.

Answer 1

Accepted answer did not work for me, here is what worked:

<ListItemText 
    primary={tooLongTitle} 
    primaryTypographyProps={{ style: { whiteSpace: "normal" } }} />

Answer 2

you can add the following CSS to your cell:

word-wrap: break-word;

Hope it helps