Question

我在缩小包含单个元素的HTML表格单元时遇到问题。这是HTML和CSS（请注意，里面的文字没有空格）：

HTML

<table>
 <tr>
  <td class="first-col">Column 1</td>
  <td class="second-col"><a   href="http://example.com">aaaaaaaaaabbbbbbbbbbbbbbbbccccccccccccddddddddddeeeeeeeeeeffffffffffff</a></td>
 </tr>
</table>

CSS

table {
width: 100%
}
.first-col {
width: 30%;
}
.second-col {
width: 70%;
}

请参阅http://jsfiddle.net/flynam/GwH93/1/

当我将页面的宽度设置得更小时，第二列的收缩率不会小于元素中包含的文本的宽度。理想情况下，当单元格应该小于整行文本的长度时，我希望用省略号截断文本。

当我添加这个CSS时，没有任何事情发生：

.second-col {
width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

有什么想法吗？

Answer 1

首先，在列中添加一组width。您需要指定除width之外的auto，因为浏览器需要知道何时截断文本。通过将auto设置为宽度，文本将会展开。

其次，将显示设置为inline-block或block。这是因为text-overflow属性仅适用于块容器。

.second-col {
    width: 30%;
    display: block; /* or inline-block */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Demo Fiddle

收缩包含A标记的HTML表格单元格

1 个答案: