Material UI Grid子元素文本溢出：如何实现文本自动换行？

原因分析 #

你遇到的问题是连续无空白的长文本（比如超长单词、无空格字符串）默认不会自动换行，超出了Grid的容器边界——虽然Grid布局本身正常，但文本的换行规则未生效。

具体解决方法 #

通过添加CSS样式强制文本换行，有两种常用实现方式：

方式1：给文本容器加内联样式 #

在包裹文本的元素（比如Typography或div）上直接设置换行样式，两个属性搭配可兼容不同浏览器：

<Grid item xs={6} style={{ backgroundColor: "lightblue" }}>
  <Typography style={{ wordWrap: 'break-word', overflowWrap: 'break-word' }}>
    {/* 你的长文本内容 */}
  </Typography>
</Grid>

方式2：用MUI Box组件配合sx属性 #

如果习惯使用MUI组件体系，可通过Box包裹文本并设置样式：

<Grid item xs={6} style={{ backgroundColor: "lightblue" }}>
  <Box sx={{ wordWrap: 'break-word', overflowWrap: 'break-word' }}>
    {/* 你的长文本内容 */}
  </Box>
</Grid>

补充适配：带换行/空白的文本 #

如果文本本身包含换行或空白字符，可额外添加whiteSpace: 'pre-wrap'，既能保留原有格式，又能自动换行：

style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}

设置后，无论文本是带换行的内容还是超长无空格字符串，都会被限制在Grid容器内自动换行，不会溢出边界。

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