标题太长将菜单按钮滑动到卡片右侧答案

【问题标题】：Too long title slide the menu button to the right outside of the card标题太长将菜单按钮滑动到卡片右侧
【发布时间】：2020-08-13 12:32:25
【问题描述】：

我的 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类

感谢大家的帮助！

【问题讨论】：

寻求代码帮助的问题必须包含最短的代码以便在问题本身中包含重现它所必需的最好是Stack Snippet。见How to create a Minimal, Reproducible Example
如果你想隐藏文本并在 title html 属性中显示整个标题，我建议你检查溢出。或者你可以用 word-break css 打破它
@Paulie_D codesandbox.io/s/dazzling-paper-5d35h?file=/src/App.js
@MaximeGUILHEM 我试过了。不工作
感谢提供的代码，只需在课堂上添加max-width: 70%;：MuiCardHeader-content

标签： javascript css reactjs material-ui

【解决方案1】：

您需要使用text-overflow: ellipsis、overflow: hidden 和white-space: nowrap 限制父级

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

【讨论】：