如何在Material UI DataGrid中实现内容空间不足时自动换行？

要让DataGrid中"Titre PFE"列的长文本自动换行并完整显示，需要同时实现文本允许换行和行高自适应内容两个要点，以下是两种可行的修改方案：

方案一：使用官方内置属性（MUI X v5.11+适用） #

利用DataGrid列定义的wrapText属性开启自动换行，配合getRowHeight让行高自适应内容：

// 修改列配置
const columns = [
  {
    field: "titre",
    headerName: "Titre PFE",
    headerAlign: "center",
    width: 380,
    wrapText: true, // 开启文本自动换行
    cellStyle: {
      padding: '8px 12px' // 优化内边距，提升显示美观度
    }
  },
  // 其他列配置...
];

// 修改DataGrid组件
<div style={{ height: 515, width: "100%" }}>
  <DataGrid
    rows={pfeList}
    columns={columns}
    pageSize={8}
    autoPageSize
    rowsPerPageOptions={[7]}
    getRowHeight={() => 'auto'} // 行高根据内容自动调整
  />
</div>

方案二：自定义单元格渲染器（兼容旧版本，更灵活） #

如果你的MUI X版本不支持wrapText属性，可通过自定义单元格组件强制设置换行样式：

// 自定义单元格组件
const TitleCell = ({ value }) => {
  return (
    <div style={{
      whiteSpace: 'pre-wrap',
      wordBreak: 'break-word',
      padding: '8px 12px',
      height: '100%',
      display: 'flex',
      alignItems: 'center'
    }}>
      {value}
    </div>
  );
};

// 修改列配置，指定自定义渲染器
const columns = [
  {
    field: "titre",
    headerName: "Titre PFE",
    headerAlign: "center",
    width: 380,
    cellRenderer: TitleCell // 绑定自定义单元格组件
  },
  // 其他列配置...
];

// 修改DataGrid组件
<div style={{ height: 515, width: "100%" }}>
  <DataGrid
    rows={pfeList}
    columns={columns}
    pageSize={8}
    autoPageSize
    rowsPerPageOptions={[7]}
    getRowHeight={() => 'auto'} // 行高自适应内容
  />
</div>

注意事项 #

• 若希望行高保持统一，可将getRowHeight替换为固定值（如rowHeight: 60），文本会在固定高度内换行显示。
• wordBreak: 'break-word'属性可确保超长单词也能拆分换行，避免内容超出列宽。

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