Question

我正在使用材质UI Table组件来呈现表。当单元格中的内容流过时，我想显示...省略号。当前的行为是将文本包装在单元格内。我尝试添加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;
}

Answer 1

两个注意点

您不需要在root内放入inline-styles，将其删除
...的CSS

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

在线尝试：

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

Answer 2

您在这里找到解决方法

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;
}

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

Answer 3

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

如何在材料ui表单元格中隐藏溢出内容而不是包装

3 个答案: