一. 问题描述

react material UI开发环境，table 的中的其中一列数据，有数据过长，导致真个表 变形，如下图：

二. 解决方案

配置table cell的 属性：

const styles = (theme) => ({
  tableCell: {
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    maxWidth: '40px',
  },
});

最关键的是：

textOverflow: 'ellipsis',

maxWidth: '40px',

 

textOverflow 的配置参数ellipsis 表示长度被截断的地方，以省略号表示

maxWidth的值是指 固定宽度，不会因为内容过长而导致table变形