在 HTML 表格单元格内剪辑长文本，悬停时显示全部内容答案

【问题标题】：Clip long text inside HTML table cells, show entire content on hover在 HTML 表格单元格内剪辑长文本，悬停时显示全部内容
【发布时间】：2015-07-28 07:27:19
【问题描述】：

我有一个表格 html 表格，其中有一列名为“地址”。地址包含很长的字符串。我想要的是我只想显示地址的前 2 或 3 个单词，当我将鼠标悬停在它上面时，它应该显示完整的地址。如何使用 html 表格做到这一点？

【问题讨论】：

向我们展示代码或演示，否则我们如何提供帮助！
对于您的第一个请求，请使用 css overflow: hidden; 或 text-overflow: ellipsis;。我会尝试您的第二个请求（悬停时显示）

标签： html css html-table overflow

【解决方案1】：

解决方案：

使用table-layout: fixed 使您的表格列保持固定大小
将内容包装在 div 元素中并操作宽度和溢出属性

/*
 * fixed table layout
 */
table {
  table-layout: fixed;
  width: 400px;
  font: larger monospace;
  border-collapse: collapse;
}
th:nth-child(1) {
  width: 20%;
}
th:nth-child(3) {
  width: 20%;
}
/*
 * inline-block elements expand as much as content, even more than 100% of parent
 * relative position makes z-index work
 * explicit width and nowrap makes overflow work
 */
div {
  display: inline-block;
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
/*
 * higher z-index brings element to front
 * auto width cancels the overflow
 */
div:hover {
  z-index: 1;
  width: auto;
  background-color: #FFFFCC;
}

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Address</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><div>John Smith</div></td>
      <td><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></td>
      <td><div>1-234-567890</div></td>
    </tr>
    <tr>
      <td><div>Jane Doe</div></td>
      <td><div>Suspendisse lacinia, nunc sed luctus egestas, dolor enim vehicula augue.</div></td>
      <td><div>1-234-567890</div></td>
    </tr>
  </tbody>
</table>

【讨论】：

这个答案很好，但我正在处理非常长的字符串的表格项目，所以当你将鼠标悬停在它们上面时，文本会离开屏幕。有没有办法让文本留在它的“列”中并在高度方面而不是在宽度方面增长？我尝试过使用这个 CSS 来让它做到这一点，但 CSS 并不是我的强项。
我现在无法测试，但一个技巧是在悬停时将 white-space: nowrap 更改为 white-space: normal。应该有副作用，但希望您（或其他人）可以解决它们。
我完全不担心副作用。这正是我所需要的。如果有人碰巧并正在寻找类似的东西，请制作一个 JSFiddle 来测试它：jsfiddle.net/kxso85w2/1 感谢您的帮助！

【解决方案2】：

.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 的示例。

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

【讨论】：

可以，但是单元格扩展太大，需要用鼠标向右拖动单元格内容才能查看全文

【解决方案3】：

使用 Tootips 给出了解决方案，

<html>
  <table border="1" >
    <tr>
      <td>A</td>
      <td><abbr title="Ab df df dfdf df dfdkjf sdfk dfdf">Ab df df</abbr> </td>
    </tr>
    <tr>
      <td>B</td>
      <td><abbr title="Bb df df dfdf df dfdkjf sdfk dfdf">Bb df df</abbr> </td>
    </tr>
  </table>
</html>

【讨论】：

添加 css-rule: text-decoration: unset 以删除点
没错。应该在那里显示文本的点是部分的，您可以将其悬停以查看它。因此，在这种情况下不需要 css 规则。