剪辑HTML表格单元格内的长文本，在悬停时显示整个内容 [英] Clip long text inside HTML table cells, show entire content on hover

问题描述

我有一个名为address的表格的html表格。该地址包含非常长的字符串。我想要的只是显示地址的前两个或三个单词，当我将它悬停在上面时，它应显示完整地址。我怎样才能做到这一点与HTML表？

解决方案

.adress {max-width：50px;白色空间：nowrap; overflow：hidden;}。adress：hover {max-width：initial; }

 < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 1.11.1 / jquery.min.js>< / script>< table border =1> < THEAD> < TR> < TD> <强> ID< /强> < / TD> < TD> <强> ADRESS< /强> < / TD> < / TR> < / THEAD> < TBODY> < TR> < TD> 1< / td> < td class =adress>非常长的地址无法完全显示< / td> < / TR> < / tbody>< / table>  

您可能会开始从那里，这是一个如何使用 max-width 并结合 overflow：hidden 的例子。

将鼠标悬停在地址单元上查看结果

I have a table html table which has a column named "address". The address contains very long strings. What I want is I only want to show first 2 or 3 words of the address and when I hover over it, it should show full address. How can I do this with html table?

解决方案

.adress {
  max-width : 50px; 
  white-space : nowrap;
  overflow : hidden;
}

.adress:hover {
  max-width : initial; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
  <thead>
    <tr>
      <td>
        <strong>ID</strong>
      </td>
      <td>
        <strong>Adress</strong>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td class="adress">
        A very, very long adress that cannot be showed entirely
      </td>
    </tr>
  </tbody>
</table>

You might begin from there, this is an example of how to use max-width combined with overflow : hidden.

Pass hover the adress cell to see the result

这篇关于剪辑HTML表格单元格内的长文本，在悬停时显示整个内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！