如何在表格中包装大文本并将其作为弹出框在鼠标悬停上显示？ [英] How to wrap large text in a table and display it on mouse hover as a popover?

问题描述

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

< table> ; < THEAD> < tr class =text-center> <的第i; column1的< /第> <的第i;列2< /第> <第>栏3< /第> < / TR> < / THEAD> < TR> < td class =text>< span> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机采用了一种类型的厨房，并将其炒作成一本样书。< / td>< / td> < td class =text>< span> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机采用了一种类型的厨房，并将其炒作成一本样书。< / td>< / td> < td class =text>< span> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机采用了一种类型的厨房，并将其炒作成一本样书。< / td>< / td> < / tr>< / table>

解决方案

$可以使用 position：absolute; b $ b

table td.text {max-width：10px; } table td.text span {white-space：nowrap;溢出：隐藏;文本溢出：省略号;显示：inline-block; max-width：100％;} table td.text：hover span：not（.empty）{background-color：＃BDE5F8;溢出：可见;空白：正常;身高：自动; / *仅添加此行* / position：absolute;}

<表> < THEAD> < tr class =text-center> <的第i; column1的< /第> <的第i;列2< /第> <的第i;栏3< /第> <的第i; Column4< /第> < / TR> < / THEAD> < TR> < td class =text>< span> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机采用了一种类型的厨房，并将其炒作成一本样书。< / td>< / td> < td class =text>< span> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机采用了一种类型的厨房，并将其炒作成一本样书。< / td>< / td> < td class =text>< span> Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum自从十六世纪以来一直是业界标准的虚拟文本，当时一台不知名的打印机采用了一种类型的厨房，并将其炒作成一本样书。< / td>< / td> < td class =text>< span class =empty>< / span>< / td> < / table>

Can this be done using only HTML and CSS? Below is the code I tried. The problem is on mouse hover it displays it in the same cell and changes the width of the tables. Is there a way to display the text as a popover?

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>

解决方案

You can use position:absolute; to make the text get out of the flow when you hover over it

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>

这篇关于如何在表格中包装大文本并将其作为弹出框在鼠标悬停上显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！