如何将大文本包装在表格中并在鼠标悬停时将其显示为弹出框？答案

【问题标题】：How to wrap large text in a table and display it on mouse hover as a popover?如何将大文本包装在表格中并在鼠标悬停时将其显示为弹出框？
【发布时间】：2017-11-13 22:38:24
【问题描述】：

这可以仅使用 HTML 和 CSS 来完成吗？下面是我试过的代码。问题在于鼠标悬停在同一单元格中显示它并更改表格的宽度。有没有办法将文本显示为弹出框？

table td.text {
  max-width: 10px;
}

table td.text span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}

table td.text span:hover {
  background-color: #BDE5F8;
  overflow: visible;
  white-space: normal;
  height: auto;
  /* just added this line */
}

<table>
  <thead>
    <tr class="text-center">
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
    </tr>
  </thead>
  <tr>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
  </tr>

</table>

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案1】：

您可以使用position:absolute; 使您将鼠标悬停在文本上时使其脱离流线

table td.text {
  max-width: 10px;
  
}

table td.text span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
table td.text:hover span:not(.empty) {
  background-color: #BDE5F8;
  overflow: visible;
  white-space: normal;
  height: auto;
  /* just added this line */
  position:absolute;
}

<table>
  <thead>
    <tr class="text-center">
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
    </tr>
  </thead>
  <tr>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
    <td class="text"><span class="empty"></span></td>
  </tr>

</table>

【讨论】：

这可行，但是，一个问题是如果我的单元格没有任何文本，那么在悬停时它不应该显示任何内容。在这种情况下，它仍然会显示元素
@Steven.lin 如果没有文本，则不会显示任何内容.. 看我的编辑！
在您的 sn-p 中同意它不会显示。但是为了让它有更好的外观和感觉，我在 CSS 中添加了边框和填充，即使单元格中没有文本，它也会显示出来。您是否认为有解决此问题的方法。非常感谢您的帮助。
@Steven.lin 是否可以为 td 或 span 添加一个类来定义空单元格？
我不知道该怎么做。

【解决方案2】：

您似乎在寻找tooltips 或popovers，这些功能必须通过 javascript 实现，因为您将更好地处理定位（想象当您的元素靠近边框时）或延迟打开/关闭。

Bootstrap 具有以下功能：

但我想在 github 上有很多这样的东西！

【讨论】：

title 属性在没有那些 js 组件的情况下可以很好地完成工作
工具提示被认为是替换 title attr hover behavior 允许 html 支持、样式、ecc.. [title] 是浏览器提供的默认值，例如 alert 或prompt 但有时您的 UI 设计/经验需要更复杂的东西。
是的，这是真的

【解决方案3】：

您可以使用 title 属性，而不是使用悬停 css。我在这里复制代码只是为了向您展示一种方式，但您应该使用 javascript 将文本数据操作到 title 属性而不是在此处使用复制。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        table td.text {
            max-width: 10px;
        }

        table td.text span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            max-width: 100%;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr class="text-center">
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
    </tr>
    </thead>
    <tr>
        <td class="text" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
        </td>
        <td class="text" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
        </td>
        <td class="text" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span>
        </td>
    </tr>

</table>
</body>
</html>

【讨论】：

【解决方案4】：

试试这个，

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

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

<table border="1">
  <thead>
    <tr>
      <td>
        <strong>Lorem</strong>
      </td>
      <td>
        <strong>Ipsum</strong>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td class="expand">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </td>
    </tr>
  </tbody>
</table>

【讨论】：