材质 UI 列表项文本：主要文本溢出

Posted 2023-02-21

【中文标题】材质 UI 列表项文本：主要文本溢出

【英文标题】：Material UI List Item Text: Primary Text Overflow

【发布时间】：2022-01-23 08:13:25

【问题描述】：

对不起，如果有人问过这个问题，我查了一下，找不到答案！

我有一个具有设定宽度的 Material UI 列表视图（它在边栏中）。我正在尝试呈现某些选项的标题，而 ListItemText 的主要文本正在环绕其容器。为什么不简单的扩展容器的高度并多行？

提前非常感谢！

return (
            <ListItem
              key=network._id
              selected=user.network && user.network._id === network._id
            >
              <ListItemText
                primary=network.name
                sx= maxWidth: '100%' 
              />
              <IconButton>
                <DoubleArrowIcon />
              </IconButton>
            </ListItem>
          );

【问题讨论】：

尝试给类一个类似word-wrap:break-word;的风格

我将它添加到 ListItem 和 ListItemText 都没有成功。

【参考方案1】：

全部，

如果你有我的问题，这对我有用：

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

信用： multiline with <ListItemText>