Sorry if this has been asked, I looked and couldn't find the answer!

I have a Material UI listview that has a set width (it's in a sidebar). I am trying to render the titles of some options, and the Primary text of ListItemText is wrapping past its container. Why is it not simply extending the container's height and going multi-line?

Thanks so much in advance!

return (
            <ListItem
              key={network._id}
              selected={userwork && userwork._id === network._id}
            >
              <ListItemText
                primary={network.name}
                sx={{ maxWidth: '100%' }}
              />
              <IconButton>
                <DoubleArrowIcon />
              </IconButton>
            </ListItem>
          );

Sorry if this has been asked, I looked and couldn't find the answer!

I have a Material UI listview that has a set width (it's in a sidebar). I am trying to render the titles of some options, and the Primary text of ListItemText is wrapping past its container. Why is it not simply extending the container's height and going multi-line?

Thanks so much in advance!

return (
            <ListItem
              key={network._id}
              selected={userwork && userwork._id === network._id}
            >
              <ListItemText
                primary={network.name}
                sx={{ maxWidth: '100%' }}
              />
              <IconButton>
                <DoubleArrowIcon />
              </IconButton>
            </ListItem>
          );

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow asked Dec 22, 2021 at 1:43 Julian DurantiniJulian Durantini 12911 silver badge66 bronze badges 2

• 1 try to give class a style like word-wrap:break-word; – Monika Virmani Commented Dec 22, 2021 at 11:44
• I added that to both the ListItem and the ListItemText with no success. – Julian Durantini Commented Dec 22, 2021 at 22:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

All,

If you have my problem, here is what worked for me:

<ListItemText 
    primary={tooLongTitle} 
    primaryTypographyProps={{ style: { whiteSpace: "normal" } }} />

Credit: multiline with <ListItemText>

Easy

<ListItemText primary="a title" primaryTypographyProps={{ noWrap: true }} />