html - 表格单元格中的文本应仅在悬停时换行，否则应以省略号结尾

Question

要求:

我有一个表格，其中一些表格单元格可能包含很长的文本(根本没有空格或有空格)。现在，我不希望显示所有冗长的文本，这只会使该特定列变得很长。相反，如果该单元格中的文本超过特定长度或该单元格的最大宽度，我希望该单元格中的文本类似于“sffasfashdsjfs...”。

只有当我将鼠标悬停在该表格单元格上时，才会显示换行的文本(即使文本没有空格)。

我使用 CSS 的尝试:

td
{
min-width:50px;
max-width: 300px;
overflow:hidden;
text-overflow:ellipsis;
}


td:hover
{
min-width:50px;
max-width :300px;
position:relative; // the cell adjusts its width to show the text
word-break: break-all; // for wrapping the text with no white spaces
}

结果:

当鼠标悬停在该单元格上时，文本确实会换行，但问题是这不是以统一的方式工作的。一些不超过最大宽度的表格单元格也采用较小的宽度，其中的文本被包裹起来，一些表格单元格不占用最大宽度。

我需要所有单元格先占据它们的最大宽度，然后在悬停时换行，文本小于最大宽度的单元格不受影响。我也不希望表格布局固定。

为此需要一个 CSS 解决方案(不是 javascript 解决方案)。

非常感谢对此的任何变通方法。

Answer 1

包装问题有点奇怪，似乎将 td 更改为 display: inline-block; 可以阻止它发生。

table {
    white-space: nowrap;
}
td {
    display: inline-block;
    max-width: 300px;
    min-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    white-space: nowrap;
}
td:hover {
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
}

<table>
    <tr>
        <td>Lorem</td>
        <td>Loremipsumdolorsitamet</td>
        <td>Loremipsumdolorsitamet,consecteturadipiscingelit.Utcursusurnamassa,utaliquetodioconsecteturnec. </td>    
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut cursus urna massa, ut aliquet odio consectetur nec.</td>
    </tr>
    <tr>
        <td>Lorem</td>
        <td>Loremipsumdolorsitamet</td>
        <td>Loremipsumdolorsitamet,consecteturadipiscingelit.Utcursusurnamassa,utaliquetodioconsecteturnec. </td>    
        <td>Lorem ipsum dolor sit amet</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut cursus urna massa, ut aliquet odio consectetur nec.</td>
    </tr>
</table>