带<listitemtext>的多行

Question

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

我一直在使用Material-ui和react。

我正在尝试创建一个包含长文本的列表。

当给出长文本时，文本显示为图片，但我希望使用多行文本。

这是我的代码段。

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

如果需要更多信息，请告诉我。

谢谢。

Answer 1

接受的答案对我不起作用，这是有效的方法：

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

Answer 2

您可以将以下CSS添加到您的单元格中：

word-wrap: break-word;

希望有帮助