Too long title slide the menu button to the right …

I have a problem with 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>
    }
/>

For some reason too long title or subtitle slide the menu button to the right outside the card.

How can I prevent it?

Result I need

Here is code sandbox

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

UPD: Solution

Add the following code

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

to .MuiCardHeader-content class

Thanks to everyone for help!

Answer

You need to restrict the parent with text-overflow: ellipsis, overflow: hidden and white-space: nowrap

So in your case you just have to add .MuiTypography-noWrap to the parent .MuiCardHeader-content

Too long title slide the menu button to the right outside of the card

Advertisement

Answer