How to wrap or truncate long strings in a Material-UI ExpansionPanelSummary

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.

From the official docs: https://material-ui.com/api/typography/

noWrap: If true, the text will not wrap, but instead will truncate with a text overflow ellipsis. Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow).

Note the capital 'W' in 'noWrap'.

<Typography noWrap className={classes.heading}>
  areallyreallylongaddress@email.example.com
</Typography>

Suggest that you wrap your Typography element with a div that is styled with textOverflow: "ellipsis", for example:

<div style={{overflow: "hidden", textOverflow: "ellipsis", width: '11rem'}}> 
  <Typography nowrap className={classes.heading}>
    areallyreallylongaddress@email.example.com
  </Typography>
</div>