Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 327
Shorn Avatar asked Nov 09 '18 07:11

Shorn


People also ask

How do you wrap or truncate long strings in a material UI?

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.

How do I use ellipsis text in CSS?

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.


2 Answers

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> 
like image 171
Máté Homolya Avatar answered Sep 20 '22 21:09

Máté Homolya


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> 
like image 43
Joel Stevick Avatar answered Sep 20 '22 21:09

Joel Stevick