标题过长，将菜单按钮滑到卡的右侧

问题描述

我的MuiCardHeader有问题

<CardHeader
    disableTypography
    avatar={renderAvatar()}
    action={
        <IconButton onClick={toggleMenu}>
            <img src={MoreIcon} alt=""/>
        </IconButton>
    }
    title={
        <Typography Nowrap variant="subtitle1">
            {data.name}
        </Typography>
    }
    subheader={
        <Typography variant="subtitle2" color="textSecondary">
            {data.children.items.length} items
        </Typography>
    }
/>

由于某种原因，标题或副标题太长，将菜单按钮滑到卡外的右侧。

如何预防呢？

我需要的结果

这是代码沙箱

https://codesandbox.io/s/dazzling-paper-5d35h?file=/src/App.js

UPD：解决方案

添加以下代码

textOverflow: "ellipsis",overflow: "hidden",whiteSpace: "Nowrap",

到.MuiCardHeader-content类

感谢大家的帮助！

解决方法

您需要使用text-overflow: ellipsis，overflow: hidden和white-space: nowrap

限制父级

因此，在您的情况下，您只需将.MuiTypography-noWrap添加到父级 .MuiCardHeader-content