long text MenuItems should ellipse

• I have searched the issues of this repository and believe that this is not a duplicate.

This might be related: https://github.com/mui-org/material-ui/pull/3250 but i’m not sure

Expected Behavior

Menu item texts should ellipse

Current Behavior

They somehow don’t, not sure why as text-overflow: ellipse is present

Steps to Reproduce (for bugs)

1. https://codesandbox.io/s/p5kj9zw2xq
2. resize the screen till it is to small to display the menu items
3. realize it doesn’t ellipse

Context

We have some menu item text which are to long on mobile.

Your Environment

Tech	Version
Material-UI	latest
React	latest
browser	chrome latest
etc

[sakulstra]

For anyone stepping into the problem it seems like wrapping the inner content into a div seems to solve the problem for now:

<FormControl style={{ maxWidth: "150px" }}>
        <Select value="red">
          {options.map(option => (
            <MenuItem key={option._id} value={option._id}>
              <div style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
                {option.name}
              </div>
            </MenuItem>
          ))}
        </Select>
      </FormControl>

@oliviertassinari thanks for pointing out the problem 👍 - wouldn’t have found the issue without you! Should this perhaps be the default behavior? or at least somehow be noted in the docs?

[oliviertassinari]

@nathanmarks Let’s document 2. then 😃. I’m adding the support for inherit so we don’t have to know the variant:

            <MenuItem>
              <Typography variant="inherit" noWrap>
                Label
              </Typography>
            </MenuItem>

Is there any way we could use ListItemText for this instead?

What do we win? Typography is the low-level text primitive block. Even better, I love how people can build their own Box component in https://github.com/jxnblk/styled-system#usage.