react text-overflow: ellipsis does not work

Question

I'm using styled-components.
If the title of a table has more characters than 400px... I've applied text-overflow: ellipsis; to the td, but it's not working.
I don't know how to solve this problem.
How can I apply text-overflow to td in table tags?

import styled from "styled-components";

export default function App() {
  const lists = [
    "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
    "october",
    "A"
  ];
  return (
    <div className="App">
      <Table>
        <tr>
          <td>title</td>
          <td>date</td>
          <td>type</td>
        </tr>
        <tbody>
          <tr>
            {lists.map((list) => (
              <td>{list}</td>
            ))}
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

const Table = styled.table`
  width: 100%;

  td {
    min-width: 50px;
    padding: 1rem;
  }

  tbody {
    tr {
      box-sizing: border-box;

      td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 400px;

        &:first-child {
          color: red;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          width: 400px;
        }
      }
    }
  }
`;

This is unrelated to *React* but an *HTML & CSS* thing. This has been asked for many years here, and this is the solution: https://codepen.io/vsync/pen/QNxeVQ — vsync, Dec 22 '21 at 07:15
Does this answer your question? [How can I truncate table cells, but fit as much as content possible?](https://stackoverflow.com/questions/5239758/how-can-i-truncate-table-cells-but-fit-as-much-as-content-possible) — vsync, Dec 22 '21 at 07:23

Junaid Shaikh · Answer 1 · 2021-12-22T07:11:25.187

1

use max-width instead of width like

 td {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 200px;
    }

edited Dec 22 '21 at 07:11

answered Dec 22 '21 at 06:52

Junaid Shaikh

1,045
4
19

I applied the above style to td, but it didn't change anything. – yyy rrr Dec 22 '21 at 06:58
It works fine, here you can see the example : https://codesandbox.io/s/styled-components-forked-5v1e0?file=/Wrapper.js – HDM91 Dec 22 '21 at 07:25

react text-overflow: ellipsis does not work

1 Answers1