如何使用css实现文本溢出效应？
如何使用css实现文本溢出效应？
提问于 2022-10-18 15:37:29
如何使此文本溢出效应？
此信息将在固定宽度的MUI卡中显示。这就是我的代码的样子：
cardContent: {
fontWeight: 700,
color: "#0E0E0E",
fontSize: "16px",
lineHeight: "24px",
},
cardComment: {
fontWeight: 400,
color: "#0672CB",
fontSize: "16px",
lineHeight: "24px",
textDecoration: "underline",
width: "100px",
"&:hover": {
color: "#0672CB",
textDecoration: "underline",
},
},
...
<Typography className={classes.cardContent}>
Comment: <a className={classes.cardComment}>{group.SizingComments}</a>
</Typography>
回答 1
Stack Overflow用户
发布于 2022-10-18 15:47:24
.cardContent {
display: flex;
}
.cardComment {
width: 180px;
/*You have to provide width here*/
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}<div class="cardContent">
Comment:<a class="cardComment" href="javascript:void(0);">Begining of the comment some example text</a>
</div>
- 只需将下面的CSS添加到
.cardComment类中，并提供width查看text-overflow:ellipsis的效果。
.cardComment {
width: 180px;
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74113715
复制相关文章
相似问题
腾讯云开发者
