2

我在缩小包含单个元素的 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;
}

有什么想法吗？

4

1 回答 1

1

首先，将一组添加width到您的列。您需要指定 a widthother thanauto因为浏览器需要知道何时截断文本。通过设置auto宽度，文本只会扩大。

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

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

演示小提琴

于 2013-11-06T10:58:24.517 回答