title: How to hide the overflow content in material ui table cell instead of wrapping
body: <p>I am using the material UI Table component to render a table. I want to show <code>...</code> ellipsis when the content in a cell over flows. The current behavior is that it wraps text inside the cell. I tried adding CSS styles but to no avail. How do I achieve this?</p>
  
  <pre><code>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 (
      &lt;TableContainer component={Paper}&gt;
        &lt;Table aria-label="simple table"&gt;
          &lt;TableHead&gt;
            &lt;TableRow&gt;
              &lt;TableCell&gt;Dessert (100g serving)&lt;/TableCell&gt;
              &lt;TableCell align="right"&gt;Calories&lt;/TableCell&gt;
            &lt;/TableRow&gt;
          &lt;/TableHead&gt;
          &lt;TableBody&gt;
            {rows.map(row =&gt; (
              &lt;TableRow key={row.name}&gt;
                &lt;TableCell style={{root:{overflowX: 'hidden', textOverflow: "ellipsis"}}} className="overflow-test" component="th" scope="row"&gt;
                  {row.name}
                &lt;/TableCell&gt;
                &lt;TableCell align="right"&gt;{row.calories}&lt;/TableCell&gt;
              &lt;/TableRow&gt;
            ))}
          &lt;/TableBody&gt;
        &lt;/Table&gt;
      &lt;/TableContainer&gt;
    );
  }
  </code></pre>
  
  <pre><code>.overflow-test {
    overflow-x: hidden !important;
    text-overflow: ellipsis !important;
  }
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/modern-resonance-hme4s?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit modern-resonance-hme4s"></a></p>