'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 enter image description here

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.

cssmaterial-ui


Solution 1:[1]

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>

Solution 2:[2]

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>

Solution 3:[3]

Here's how I solved it:

const useStyles = makeStyles(theme => ({
  summary: {
    overflow: 'hidden'
  }
}))

// ... snipped ...

const classes = useStyles()

// ... snipped ...

<ExpansionPanelSummary classes={{ content: classes.summary }} expandIcon={<SomeIcon />}>
  <Typography noWrap title={experiment.name}>{longTextHere}</Typography>
</ExpansionPanelSummary>

Instead of applying the style to the ExpansionPanelSummary component itself, apply it to the "inner content".

Solution 4:[4]

To wrap (not truncate with ellipse) text inside a material / MUI button:

<LoadingButton
  sx={{
    fontSize: {
      lg: 12,
      md: 11,
      sm: 10,
      xs: 10
    },
    wordWrap: 'break-word',
    width: '11rem',
  }}>
  <div style={{ whiteSpace: 'normal'}}> 
    My Button Text
  </div>
</LoadingButton>

The width: '11rem' will keep the width of the buttons consistent against varying text sizes, but words will still wrap without it (but inconsistently based on text width).

The fontSize sx helpers are handy to scale down your text based on screen width.

Solution 5:[5]

If you want to wrap the text to newline use:-

<Box component="div" whiteSpace="normal">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</Box>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Supun Praneeth
Solution 2 Joel Stevick
Solution 3 Cequiel
Solution 4 Kelsey Hannan
Solution 5 Subhash Saini

Related Questions