HTML 表格切断长文本并在悬停/单击时显示全文

Question

首先，我知道有一些关于此的主题，但没有一个对我有用。我尝试了以下方法:

- Showing truncated text on hover using CSS ellipsis overlaps text below it

- Clip long text inside HTML table cells, show entire content on hover

-以及我自己想出的一些解决方案。

但它们都不起作用，所以我来了。

我正在尝试制作一个 HTML/CSS 表格，它可以包含长文本，但当文本长于单元格宽度时它会被截断。我已经在我的代码中设置了宽度。但是，当您将鼠标悬停在文本上/单击文本时(无关紧要)，文本应该完整显示，并且表格行也会因此变高。

我的代码:JSFIDDLE:https://jsfiddle.net/bcuhtvdm/

index.php:(相关代码)

        <table>
            <tr>
                <th class="t1">Lorem</th>
                <th class="t2">ipsum</th>
                <th class="t3">Lorem</th>
                <th class="t4">ipsum</th>
                <th class="t5">Lorem</th>
                <th class="t6">ipsum</th>
                <th class="t7">Lorem</th>
                <th class="t8">ipsum</th>
                <th class="t9edit"></th>
            </tr>

            <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum dolor sedum</td>
                <td>sadipscing elitr</td>
                <td>clita kasd</td>
                <td>clita kasd</td>
                <td>diam voluptuabcdefghijklmnopqrstuvwxyz</td>
                <td>sed diam</td>
                <td>sanctus est</td>
                <td>&nbsp;<i class="fas fa-edit fa-lg"></i>&nbsp;&nbsp;&nbsp;<i class="fas fa-trash fa-lg"></i></td>
            </tr>
            <tr>
                <td>Lorem ipsum</td>
                <td>Lorem ipsum dolor sedum</td>
                <td>sadipscing elitr</td>
                <td>clita kasd</td>
                <td>clita kasd</td>
                <td>diam voluptua</td>
                <td>sed diam</td>
                <td>sanctus est</td>
                <td>&nbsp;<i class="fas fa-edit fa-lg"></i>&nbsp;&nbsp;&nbsp;<i class="fas fa-trash fa-lg"></i></td>
            </tr>
</table>

main.css:(相关代码)

table {
  font-family: Arial, sans-serif;
  font-size: 14px;
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0 0 0;
  table-layout: fixed;
}
table td, table th {
  height: 50px;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  word-break: break-all;
  white-space: nowrap;
  border: 1px solid #C8C8C8;
  text-align: left;
  padding: 10px;
}
table tr:nth-child(even) {
  background-color: #E8E8E8;
}
table tr:hover {
  background-color: yellowgreen;
  overflow: visible;
  white-space: normal;
  height: auto;
}
table .t1 {
  width: 10%;
  white-space: nowrap;
  overflow: hidden;
}
table .t1:hover {
  width: 10%;
}
table .t2 {
  width: 20%;
}
table .t2:hover {
  width: 20%;
}
table .t3 {
  width: 10%;
}
table .t4 {
  width: 10%;
}
table .t4 {
  width: 11%;
}
table .t5 {
  width: 8%;
}
table .t6 {
  width: 9%;
}
table .t7 {
  width: 11%;
}
table .t8 {
  width: 15%;
}

我的页面目前的样子:(相关部分)

我希望你能理解我的问题，并且有人可以帮助我。

谢谢:)

Answer 1

你能添加这个代码片段并告诉我它是否有效吗？

tr > td:hover {
    overflow: visible;
    white-space: unset;
}