Having an issue with the MuiCardHeader component.
<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>
}
/>
The menu button slides to the right outside the card when the title or subtitle is too long. How can this be prevented?
https://i.stack.imgur.com/FSuJh.png
Desired result:
https://i.stack.imgur.com/wKURY.png
Code sandbox link:
https://codesandbox.io/s/dazzling-paper-5d35h?file=/src/App.js
Update: Solution
Add the following code:
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap",
to the .MuiCardHeader-content class
Thank you for all the help!