如何让DataGridPro单元格显示完整字符串而非省略形式？

要实现单元格内字符串自动换行、不显示省略号的效果，核心是修改单元格的文本样式，结合DataGrid的配置即可实现，具体方法如下：

方法一：通过列配置直接设置单元格样式 #

在你的列属性中添加cellStyle，覆盖默认的文本溢出样式：

field: item.name,
headerName: item.display,
hide: item.hidden,
width: 200, 
minWidth: 50, 
maxWidth: 300,
cellStyle: {
  whiteSpace: 'pre-wrap', // 保留换行符并自动换行
  overflow: 'visible',    // 取消溢出隐藏
  textOverflow: 'clip'    // 取消省略号
}

方法二：通过CSS样式批量设置 #

如果需要给多个列或全局生效，可以添加自定义CSS：

/* 全局生效，针对所有DataGrid单元格 */
.MuiDataGrid-cell {
  white-space: pre-wrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* 仅针对特定列，需给列配置添加className */
.custom-wrap-cell {
  white-space: pre-wrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

对应列配置添加className：

field: item.name,
headerName: item.display,
hide: item.hidden,
width: 200, 
minWidth: 50, 
maxWidth: 300,
className: 'custom-wrap-cell'

补充：自动调整行高 #

如果希望行高随内容自动变化，需给DataGrid添加autoHeight或配置动态行高：

<DataGrid
  autoHeight={true}
  // 或者使用动态计算行高
  getRowHeight={() => 'auto'}
  // 其他配置项...
/>

属性说明 #

• white-space: pre-wrap：既保留文本中的手动换行，也会自动换行超出容器宽度的内容
• overflow: visible：避免内容被容器裁剪
• text-overflow: clip：替换默认的ellipsis，取消省略号显示

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