表格中的文本溢出，大小可变

Question

我希望将以下设计实现到HTML / CSS。

我在列中遇到文本溢出问题。目前，表格列宽以百分比格式给出，因此列宽将根据屏幕大小而变化，但也有最小宽度。在第一个文本列中，由于长度较大，您可以看到内容正在扩展并生成第二行。如何使用文本溢出来避免这个问题？或任何其他解决方案？此外，您可以看到鼠标悬停发生时，一组图标出现在同一行中。此时，图标下方的文本应隐藏，并应缩短，如设计中所示。你能建议我解决这个问题吗？我试过了text-overflow: ellipsis。但是当屏幕宽度发生变化时，我遇到了问题。由于可变列宽，我没有最小宽度，如何缩短此字段中的文本？还在悬停的情况下??

如果您想了解其他信息，请与我们联系。

Answer 1

如果您不希望文本分成多行，请添加white-space:nowrap规则。 然后，为单元格设置max-width。

对于图标，position位于右侧absolute，图片高出z-index。您还必须在包含单元格中添加relative位置。 为了让它们在文本上可见，我添加了背景颜色（以及一些左边的填充）。

---

编辑：修复Mozilla

Mozilla似乎忽略了position:relative;的td元素。 要修复它，你必须将td内容包装在另一个div中，然后应用这个样式

.tables td {
    font-weight: 400;
    font-size: 13px;
    border-bottom: 1px solid #E1E1E1;
    line-height: 38px;
    text-align: right;
    white-space: nowrap;
    max-width: 200px; /* just an example */
}

.tables td > div {
    overflow: hidden;
    width:100%;
    position: relative;
}

.linkFunctions {
    display: none;
    padding-top: 14px;
    position: absolute;
    right: 0;
    z-index: 999;
    background-color: #FFF9DC;
    padding-left: 3px;
    width: 100%;
    max-width: 120px; /* just an example */
    text-overflow: ellipsis;
    overflow: hidden;
}

Answer 2

这不完全是你想要的（关于省略号），但非常接近。

对于<a>添加

中的<td>

td a{
    display:block;
    overflow:hidden;
    width:100%;
    white-space:nowrap;
}

（您可能需要向他们添加一个类，以便更轻松地定位它们，而不是<a>内的所有<td>。

关于悬停。向右浮动div.linkFunctions，向其添加黄色背景，看起来它会相应地剪切文本。

Answer 3

所有这些都需要设置宽度，这不会使表格按预期流动。使用此：http://jsfiddle.net/maruxa1j/

这允许您自动将<td>上的宽度设置为百分比，:after自动调整溢出<span>

的大小