javascript - Material UI List Item Text: Primary Text Overflow - Stack Overflow

admin管理员组

文章数量:1022736

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 }} />

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 }} />

本文标签： javascriptMaterial UI List Item Text Primary Text OverflowStack Overflow