react文本溢出:省略号不起作用

Question

我使用的是样式化组件
如果表格标题的字符数超过400px。。。我应用了文本溢出：省略号；给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;
}