天天看点

react material UI开发环境,table 的中每列限制长度

一. 问题描述

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

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变形