css - CSS text-overflow: ellipsis 是否适用于 Anchor 标签？

Question

为什么以下 CSS 不起作用？

a {
    width: 60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

score 37 · Accepted Answer

37

这是因为锚是标准的inline元素。添加display:inline-block将使上述代码工作。

于 2012-07-14T20:39:36.217 回答

score 9 · Accepted Answer

这是盒子模型，display:block会做的工作

a {
    width: 60px;
    display:block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

但它可能会导致其他问题，使锚（内联元素）表现得像盒子模型元素（显示：块）。

参考： 文本溢出

更新：

display:inline-block

score 1 · Accepted Answer

1

添加display: block到您的CSS。

于 2012-07-14T20:42:01.437 回答

3 回答 3