javascript - 表 td 上的 JQuery 鼠标悬停文本？

Question

我正在使用 JQuery 和 Html 表格。

我有固定宽度的表格列。但我不希望文本换行到下一行或在 td 文本超过宽度时放大表格。

当文本长度大于td宽度时，是否可以在鼠标悬停时显示td值？

如果td值如下:

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

那么我只需要显示:

abccccc......

鼠标悬停时我必须显示整个文本:

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

这可能吗？请给我建议。

如何计算文本长度是否超过td长度？

谢谢!

Answer 1

试试这个，

HTML

<span class='more'>abbcccccccccccccccccccccccccccccccccccccccccccccccccccc</span>

CSS

.more{
    display:inline-block;
    width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.more:hover{
    white-space:initial;
    cursor:pointer;
    width:100%;
}

Demo

已更新表，

HTML

<table>
    <tr>
        <td style="max-width:100px">
           <span class='more'>abbcccccccccccccccccccccccccccccccccccccccc</span>
        </td>
    </tr>
</table>

CSS 更改

.more:hover{
    white-space:initial;
    cursor:pointer;
    width:100%;
    word-wrap:break-word;
}

Table demo