Wsrtjtyk

I want to create an ExpansionPanel where the summary might be a quite long string of unbroken characters (i.e. no hyphens, no spaces).

When I tried it out, the ExpansionPanelSummary component displays poorly on a narrow width display - it overwrites the button and overflows off-screen.

Here is my example, forked from the ExpansionPanel Material-UI demo, shrink the width of the output frame and you can see the email addresses don't wrap and look ugly: https://codesandbox.io/s/wqm5k3vmyw

I've tried using nowrap on the Typography to get it to clip (my preferred solution):

<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>

  <Typography nowrap className={classes.heading}>

    areallyreallylongaddress@email.example.com

  </Typography>

</ExpansionPanelSummary>

I've also tried adding a style overflowWrap: "break-word" to force it to wrap anywhere, not just on hyphens or whitespace.

The best I've been able to do is to get the text to not overflow outside the expansion panel itself by adding style={{ textOverflow: "ellipsis", overflow: "hidden" }} to the ExpansionPanel (see the second example from the linked example).

Ideally, I'd like it to function by truncating from the right of the context, showing an ellipsis and not overwriting the expand icon.

How can I do that with ExpansionPanel?

Failing that, how can I just force it to word-wrap?

I'm using material-UI v3.4.0 and the problem is visible on Chrome and Firefox.