如何使用CSS在MUI卡片中实现文本溢出效果？

需求说明 #

在固定宽度的MUI Card组件中，实现文本超出宽度后显示省略号的效果。

现有代码 #

样式代码 #

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>

修改方案 #

只需给cardComment样式添加文本溢出相关属性，确保元素能应用宽度限制并实现省略效果：

修改后的样式代码 #

cardContent: {
    fontWeight: 700,
    color: "#0E0E0E",
    fontSize: "16px",
    lineHeight: "24px",
},
cardComment: {
    fontWeight: 400,
    color: "#0672CB",
    fontSize: "16px",
    lineHeight: "24px",
    textDecoration: "underline",
    width: "100px",
    // 新增文本溢出控制属性
    display: "inline-block",
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
    "&:hover": {
        color: "#0672CB",
        textDecoration: "underline",
    },
},

关键属性说明 #

• display: inline-block：让<a>标签支持宽度设置（默认inline元素不生效）
• overflow: hidden：隐藏超出宽度的内容
• textOverflow: ellipsis：用省略号替代溢出文本
• whiteSpace: nowrap：强制文本单行显示

内容的提问来源于stack exchange，提问作者Ciaran Crowley