[Chip] Support overflow ellipsis by default

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

My chips might contain very long strings (e.g. “Antigonish_NOVA_SCOTIA_CANADA_A1B2C3_7b2b3b4b1b2b3ffba3b4b5cd_ZZZ”), so I would like to limit the width of the chip, and show the full text in a Tooltip.

However after setting a maxWidth, and customizing the overflow CSS, I unexpectedly see:

• a truncated section from the middle of the string
• no ellipsis
• the Chip’s delete button has disappeared

  chip: {
    maxWidth: 100,
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
  }

If I instead use “withStyles” and create my own StyledChip, and override the “label” portion of the styling, it is almost there, but I still don’t see the ellipsis, and now I’ve lost the left-padding on the delete button:

const StyledChip = withStyles(theme => ({
  root: {
    maxWidth: 100
  },
  label: {
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
  }
}))(Chip);

Expected Behavior 🤔

By setting a maxWidth, overflow:hidden and textOverflow:ellipsis, I expected to see a narrower Chip, displaying the first x characters of the string, then an ellipsis… and the delete button should remain visible.

Steps to Reproduce 🕹

I modified the Chips example from Material-UI docs to demonstrate the issue: https://codesandbox.io/s/material-demo-zt72h

Context 🔦

My chips might contain very long strings, so I would like to limit the width of the chip, and show the full text in a Tooltip.

Your Environment 🌎