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

问题描述

我有一个表格 html 表格，其中有一列名为地址".地址包含很长的字符串.我想要的是我只想显示地址的前 2 或 3 个单词，当我将鼠标悬停在它上面时，它应该显示完整的地址.我怎样才能用 html 表格做到这一点?

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?

推荐答案

.cell {
  max-width: 50px; /* tweak me please */
  white-space : nowrap;
  overflow : hidden;
}

.expand-small-on-hover:hover {
  max-width : 200px; 
  text-overflow: ellipsis;
}

.expand-maximum-on-hover: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>
      <th>
        ID
      </th>
      <th>
        Adress
      </th>
      <th>
        Comment
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td class="cell expand-maximum-on-hover">
        A very, very long adress that cannot be showed entirely
      </td>
      <td class="cell expand-small-on-hover">
        A very, very long comment to add more information to the row it belongs to.
      </td>
    </tr>
  </tbody>
</table>

你可以从那里开始，这是一个如何使用 max-width 结合 overflow : hidden 的例子.

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

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

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