如何隐藏材质ui表格单元格中的溢出内容而不是换行

Posted 2023-05-07

【中文标题】如何隐藏材质ui表格单元格中的溢出内容而不是换行

【英文标题】：How to hide the overflow content in material ui table cell instead of wrapping

【发布时间】：2020-06-30 06:53:51

【问题描述】：

我正在使用材质 UI 表格组件来呈现表格。当单元格中的内容溢出时，我想显示... 省略号。当前的行为是它将文本包装在单元格内。我尝试添加 CSS 样式但无济于事。我如何做到这一点？

import React from "react";
// import  makeStyles  from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

function createData(name, calories, fat, carbs, protein) 
  return  name, calories, fat, carbs, protein ;


const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData(
    "Ice cream sandwich dsdadsads dsadsadsadsa dsadasdsadsa dsadsadsa dsadsads asdsadsadsadsa",
    237,
    9.0,
    37,
    4.3
  ),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9)
];

export default function SimpleTable() 
  return (
    <TableContainer component=Paper>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          rows.map(row => (
            <TableRow key=row.name>
              <TableCell style=root:overflowX: 'hidden', textOverflow: "ellipsis" className="overflow-test" component="th" scope="row">
                row.name
              </TableCell>
              <TableCell align="right">row.calories</TableCell>
            </TableRow>
          ))
        </TableBody>
      </Table>
    </TableContainer>
  );

.overflow-test 
  overflow-x: hidden !important;
  text-overflow: ellipsis !important;

【参考方案1】：

给你一个解决方案

import React from "react";
// import  makeStyles  from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

import Css from "./styles.css";

function createData(name, calories, fat, carbs, protein) 
  return  name, calories, fat, carbs, protein ;


const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData(
    "Ice cream sandwich dsdadsads dsadsadsadsa dsadasdsadsa dsadsadsa dsadsads asdsadsadsadsa",
    237,
    9.0,
    37,
    4.3
  ),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9)
];

export default function SimpleTable() 
  return (
    <TableContainer component=Paper>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          rows.map(row => (
            <TableRow key=row.name>
              <TableCell component="th" scope="row">
                <div className=Css.textContainer>
                 row.name
                </div>
              </TableCell>
              <TableCell align="right">row.calories</TableCell>
            </TableRow>
          ))
        </TableBody>
      </Table>
    </TableContainer>
  );

.textContainer 
  display: block;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

您需要为容器指定宽度，然后对其应用省略号样式。

【讨论】：

我更新了沙箱以包含您的代码。但它不起作用。请看一下沙盒

@Sruthi 我无法查看您的沙盒

codesandbox.io/s/keen-water-fmn0b - 你能到这个链接吗

@Sruthi。获取沙盒时出错：

如何在不给单元格固定宽度的情况下做到这一点？我可以用 %width 做吗？

【参考方案2】：

两个注意点

inline-styles 中不需要 root，删除它

... 的 CSS

  style=
    whiteSpace: "nowrap",
    textOverflow: "ellipsis",
    width: "300px",
    display: "block",
    overflow: "hidden"
  

---

在线试用：

---

相关质检：text-overflow: ellipsis not working

【讨论】：

直接在TableCell 上应用CSS 作为display: block 可能会干扰TableCell Css。

@Shiladitya 是的，你是对的。我刚刚从演示中挑选了一个最小差异来解释需要什么。

【参考方案3】：

要使溢出的单元格保持响应，请将table-layout: fixed; 添加到表格组件。如果需要 TableCell 可以指定width: auto 或固定宽度。