css - How to line-break or line-clamp a particular menu item in React Menu Item (Web App)?

Question

I am using React Material UI in my web app and I’ve created a notification dropdown using "Menu" & "Menu Item". When I display the notification message in Menu Item, the content goes under the div and doesn’t break into other line. I've applied "Line Clamp" attribute but the content still doesn't break and goes under the div. Screen shots attached below:

<div className="MessagesDiv">
    <IconButton
      aria-controls="customized-menu"
      aria-haspopup="true"
      variant="contained"
      color="black"
      onClick={handleClick}
      style={{
        padding: '0',
      }}>
      <NotificationsNoneIcon />
    </IconButton>
    <StyledMenu
      id="customized-dropdown-msgs"
      anchorEl={anchorEl}
      keepMounted
      open={Boolean(anchorEl)}
      onClose={handleClose}
      style={{
        width: '360px',
        boxShadow: 'rgba(119, 119, 119, 0.1) 0.5px 3px 10px',
      }}>
      {notifications.map((item) =>
        <StyledMenuItem key={item.id} onClick={(event) => openNotification(event, item)} className='StyleMenuItem'>
          <ListItemText className="truncate" primary={item.message} />
        </StyledMenuItem>
      )}
    </StyledMenu>
  </div >

and I applied current attributes in css:

'.StyleMenuItem': {
  borderBottom: '1px solid rgb(224, 224, 224)',
  padding: '10px 15px',
},
'.truncate span': {
  display: 'block',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  display: '-webkit-box',
  lineClamp: '2 !important',
  boxOrient: 'vertical',
  width: '90%',
}

question from:https://stackoverflow.com/questions/65916751/how-to-line-break-or-line-clamp-a-particular-menu-item-in-react-menu-item-web-a

Answer 1

Waitting for answers