如何避免无断行文本导致MUI Grid组件项重叠

问题根源 #

你的Grid在xs屏幕下出现重叠，核心原因是<p>标签内的无空格长文本没有自动换行，导致内容撑破了Grid的宽度限制，超出部分挤占了相邻Grid item的空间。

解决方法 #

给包含长文本的<p>标签添加强制换行的CSS样式，以下是几种实现方式：

1. 全局CSS样式（在style.css中添加）

p {
  /* 允许在任意字符处强制换行，适合无空格长串 */
  word-break: break-all;
  /* 可选：优先在单词边界换行，无法拆分时再强制拆分 */
  /* overflow-wrap: break-word; */
}

2. 内联样式

直接在<p>标签上指定样式：

<Grid item xs={8} md={8}>
  <p style={{ wordBreak: 'break-all' }}>
    !!ldsfjsdlkfjklsdsdjflksdfjldskfjdlskfjdslkfjdslkfjsdlkfdsfjlkdsjfkldsjflksdfjsdlkfjlkjdsflksdjfklsdjflkdsfjlksdfjlsdkfldsjflkdsjlkffjdslkfjsdlkfdsfjlkdsjfkldsjflksdfjsdlkfjlk
  </p>
</Grid>

3. MUI sx属性

利用MUI的sx属性实现组件级样式：

<Grid item xs={8} md={8}>
  <p sx={{ wordBreak: 'break-all' }}>
    !!ldsfjsdlkfjklsdsdjflksdfjldskfjdlskfjdslkfjdslkfjsdlkfdsfjlkdsjfkldsjflksdfjsdlkfjlkjdsflksdjfklsdjflkdsfjlksdfjlsdkfldsjflkdsjlkffjdslkfjsdlkfdsfjlkdsjfkldsjflksdfjsdlkfjlk
  </p>
</Grid>

补充说明 #

切换到Grid v2无效是因为问题本身和Grid组件版本无关，而是文本内容没有遵守容器的宽度约束。只要让长文本自动换行，Grid的布局就会恢复正常，无论是v1还是v2版本的Grid都能正常工作。

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