如何防止Material UI的Typography组件文本超出父容器范围

问题原因 #

文本溢出父容器主要由两个配置缺失导致：

• 父flex容器仅设置了minWidth最小宽度，没有配置maxWidth最大宽度限制，长文本会直接撑开父容器宽度
• Typography组件未设置宽度约束和自动换行规则，长文本默认不会折行

解决方法 #

你可以根据是否需要多行省略效果选择对应方案：

方案1：仅需自动换行，不需要末尾省略号 #

给父容器添加最大宽度约束，同时给Typography配置换行规则即可：

<div style={{
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  minHeight: 180,
  minWidth: 200,
  maxWidth: '100%', // 可根据需求替换为固定宽度值，比如300
  width: '100%'
}}>
  <Typography 
    className={classes.multiLineEllipsis} 
    textAlign={'center'}
    wrap="wrap"
    style={{ width: '100%', wordBreak: 'break-word' }}
  >
    {veryLongText}
  </Typography>
  {...otherElements}
</div>

如果存在长英文/数字串需要强制断行，可保留wordBreak: 'break-word'配置，不需要可以删除。

方案2：需要保留多行末尾省略号效果 #

你需要补充multiLineEllipsis类的样式规则，完整配置如下：

.multiLineEllipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 替换为你需要限制的展示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  word-wrap: break-word;
}

父容器的配置和方案1一致，添加maxWidth和width属性即可。

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