CSS文本溢出：省略号是否适用于Anchor标记？

Question

为什么以下CSS不起作用？

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

Answer 1

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

Answer 2

对于盒子模型，display:block将完成工作

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

但是它可能会导致其他问题使锚（内联元素）表现得像box model element（display：block）。

参考： text-overflow

<强>更新

display:inline-block

Demo.

Answer 3

将display: block添加到您的css。