html - 在 HTML 表格单元格内剪切长文本，悬停时显示全部内容

Question

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

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