Question

要求：

我有一个表，其中一些表格单元格可能包含非常长的文本（根本没有空格或空格）。现在，我不希望显示所有冗长的文本，这只会使特定的列非常长。相反，我希望该单元格中的文本类似于＆＃39; sffasfashdsjfs ...＆＃39;如果超过一定长度或该单元的最大宽度。

只有当我将鼠标悬停在该表格单元格上时，才能显示包裹的文本（即使文本没有空格）。

我尝试过使用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;会阻止它发生。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

如何使用title属性？

<table>
<tr><td>Some data</td><td title="Some really long data to show when the cell is hovered.">Some real...</td><td>Some more data</td></tr>
</table>

表格单元格中的文本应仅在悬停时包装，否则应以省略号结尾

2 个答案: