如何修复Material UI中文本溢出Box容器的响应式问题

针对你的场景，问题核心在于Row方向的Stack默认不换行，且包裹链接的Box未配置合适的文本换行规则。以下是可行的修改方案：

关键改动说明 #

• 给每个direction="row"的Stack添加flexWrap="wrap"，确保小屏幕下图标与文本能自动换行
• 给包裹Link的Box设置flex: 1，让它占据Stack内剩余空间，同时添加overflowWrap: 'break-word'强制长URL文本在单词边界处换行（适配现代浏览器，比word-wrap更可靠）
• 给Link设置display: 'block'，确保它继承Box的宽度限制

修改后的代码 #

<Stack direction={'row'} spacing={2} flexWrap="wrap">
  <Box color={'rgb(24, 119, 242)'}><FacebookIcon /></Box>
  <Box
    sx={{
      flex: 1,
      overflowWrap: 'break-word',
      '&:hover': {
        cursor: 'pointer',
        textDecoration: 'underline',
      },
    }}
  >
    <Link href="#" underline="none" sx={{ display: 'block' }}>
      https://www.facebook.com/caitlyn.kerluke
    </Link>
  </Box>
</Stack>
<Stack direction={'row'} spacing={2} flexWrap="wrap">
  <Box color={'rgb(224, 45, 105)'}><InstagramIcon /></Box>
  <Box
    sx={{
      flex: 1,
      overflowWrap: 'break-word',
      '&:hover': {
        cursor: 'pointer',
        textDecoration: 'underline',
      },
    }}
  >
    <Link href="#" underline="none" sx={{ display: 'block' }}>
      https://www.instagram.com/caitlyn.kerluke
    </Link>
  </Box>
</Stack>
<Stack direction={'row'} spacing={2} flexWrap="wrap">
  <Box color={'rgb(0, 126, 187)'}><LinkedInIcon /></Box>
  <Box
    sx={{
      flex: 1,
      overflowWrap: 'break-word',
      '&:hover': {
        cursor: 'pointer',
        textDecoration: 'underline',
      },
    }}
  >
    <Link href="#" underline="none" sx={{ display: 'block' }}>
      https://www.linkedin.com/in/caitlyn.kerluke
    </Link>
  </Box>
</Stack>
<Stack direction={'row'} spacing={2} flexWrap="wrap">
  <Box color={'rgb(0, 170, 236)'}><TwitterIcon /></Box>
  <Box
    sx={{
      flex: 1,
      overflowWrap: 'break-word',
      '&:hover': {
        cursor: 'pointer',
        textDecoration: 'underline',
      },
    }}
  >
    <Link href="#" underline="none" sx={{ display: 'block' }}>
      https://www.twitter.com/caitlyn.kerluke
    </Link>
  </Box>
</Stack>

补充提示 #

若问题仍存在，可给这些Stack的父容器设置响应式maxWidth，确保整体在小屏幕下有合适的宽度约束。overflowWrap: 'break-word'会优先在单词边界换行，避免生硬截断，比word-break: break-all更符合用户阅读习惯。

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