css - 如何在 React 菜单项（Web 应用程序）中对特定菜单项进行换行或换行？

Question

我在我的网络应用程序中使用 React Material UI，并使用“菜单”和“菜单项”创建了一个通知下拉列表。当我在菜单项中显示通知消息时，内容会在 div 下并且不会中断到其他行。我已经应用了“Line Clamp”属性，但内容仍然没有中断并且在 div 下。下面附上屏幕截图：

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

我在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%',
}

标签： cssreactjsmaterial-uireact-material