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).

参考: 文本溢出

更新:

display:inline-block

演示.