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}> [email protected] </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.
To wrap or truncate long strings in a React Material-UI ExpansionPanelSummary, we add the noWrap prop to the Typography component. We add the Typography component into the AccordionSummary component.
To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.
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}> [email protected] </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}> [email protected] </Typography> </div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With