反应文本溢出：省略号不起作用

Question

我正在使用样式化组件。
如果表格标题的字符数超过 400 像素...我已应用 text-overflow: ellipsis;到 td，但它不起作用。
我不知道如何解决这个问题。
如何将文本溢出应用到表标签中的 td？

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

Answer 1

使用max-width 而不是width 喜欢

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