1

我正在寻找对 HTML/CSS 实现以下设计。

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

如果您想知道其他任何事情，请告诉我。

4

3 回答 3

2

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

对于图标，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;
}
于 2012-09-15T10:26:35.037 回答
0

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

对于<a>里面的<td>添加

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

（您可能需要向它们添加一个类以更轻松地定位它们，而不是 ALL <a>inside <td>）。

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

于 2012-09-15T10:25:18.457 回答
0

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

这使您可以自动将宽度设置<td>为百分比，并:after自动设置溢出的大小<span>

于 2015-05-21T00:27:18.990 回答