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

Question

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!

Questions seeking code help must include the **shortest code** necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Aug 13 '20 at 12:35
I will suggest you to check either overflow, if you want to hide the text and show the whole title in title html property. or you can make it break with word-break css — MaxiGui, Aug 13 '20 at 12:38
@Paulie_D https://codesandbox.io/s/dazzling-paper-5d35h?file=/src/App.js — Ivan Banha, Aug 13 '20 at 12:54
Thank for the code provided, just add `max-width: 70%;`on the class: `MuiCardHeader-content` — MaxiGui, Aug 13 '20 at 13:00
This might help https://stackoverflow.com/questions/11426275/how-can-i-show-dots-in-a-span-with-hidden-overflow/11426653 — Debsmita Paul, Aug 13 '20 at 13:08

score 2 · Accepted Answer · answered Aug 13 '20 at 13:05

2

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

answered Aug 13 '20 at 13:05

mttetc

711
5
12

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

1 Answers1