MUI Typography组件省略号不显示问题排查与优化咨询

你的代码核心问题是没有给Typography组件设置明确的宽度约束，元素会自动扩张以容纳全部文本，因此截断规则不会生效。以下是两种优化方案：

方案1：保留-webkit-box实现（支持单行/多行截断） #

给组件添加宽度或最大宽度限制，确保文本超出后会触发截断：

<Typography
  variant="body2"
  color="black"
  sx={{
    width: "200px", // 根据布局需求设置固定宽度，或用maxWidth: "100%"适配父容器
    overflow: "hidden",
    textOverflow: "ellipsis",
    display: "-webkit-box",
    WebkitLineClamp: "1", // 如需多行截断，修改此数字（比如2代表两行）
    WebkitBoxOrient: "vertical"
  }}
>
  femwiofoewjfwjefojweofjwofjoifjoeiwfjoiwejfodqwdqwmodqwopmdoqwdopqwdqwjdpqojd
</Typography>

方案2：单行截断更简洁写法 #

如果只需要单行截断，推荐使用兼容性更好的whiteSpace: nowrap方式：

<Typography
  variant="body2"
  color="black"
  sx={{
    width: "200px",
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap"
  }}
>
  femwiofoewjfwjefojweofjwofjoifjoeiwfjoiwejfodqwdqwmodqwopmdoqwdopqwdqwjdpqojd
</Typography>

关键说明 #

文本截断规则生效的核心前提是：元素必须有明确的宽度约束（固定宽度、最大宽度或继承父容器的宽度限制），否则元素会无限扩张以容纳文本，截断逻辑无法触发。

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