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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…