带有 <ListItemText> 的多行

IT技术 css reactjs material-ui
2021-05-16 14:06:59

在此处输入图片说明

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>

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

谢谢。

2个回答

接受的答案对我不起作用,这是有效的:

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

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

word-wrap: break-word;

希望能帮助到你