材质 UI 列表、ListItemText 中的 NO WRAP 挑战

Question

有没有办法在ListItemText 中不换行？

我需要 ListItemText 只是为了剪切单词而不需要任何扩展或滚动。

谢谢

Answer 1

从 Material UI 版本 5.0.6 开始，您可以使用 primaryTypography 属性覆盖 ListItemText。

有关ListItemText Api Documentation的更多信息

primaryTypographyProps：这些道具将被转发到主要排版组件（只要 disableTypography 不为真）。

这意味着传递的道具将被传递给Typography Component

要隐藏或换行文本，我们可以限制 ListItem 的宽度（如果需要，取决于父项）在这种情况下将 maxWidth 设置为 300px，然后使用 primaryTypographyProps 并传递一个 style 对象将 whiteSpace、overflow 和 textOverflow 设置为隐藏。

import { ListItem, ListItemText } from '@mui/material';

<ListItem
    sx={{
        maxWidth: 300
    }}
>
    <ListItemText
        primary={"Super long string that needs to be wrapped"}
        secondary={"other text not important"}
        primaryTypographyProps={{ 
            variant: 'subtitle2', 
            style: {
                whiteSpace: 'nowrap',
                overflow: 'hidden',
                textOverflow: 'ellipsis'
            }
        }
        secondaryTypographyProps={{ variant: 'caption' }}
    />
</ListItem>

如果您愿意，您还可以禁用 Typography 并传递您自己的组件来获得更多控制权，该组件完全有自己的样式。

disableTypography：如果为 true，则子代不会被 Typography 组件包裹。这对于通过使用 Typography 组件包装子（或主要）文本和可选的辅助文本来呈现替代 Typography 变体很有用。