CSS文本溢出:省略号在锚标签上工作吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (33)

为什么下面的CSS不能工作?

a {
    width: 60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
提问于
用户回答回答于

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

用户回答回答于

这是盒子模型,display:block会做这个工作

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

但是可能会导致其他问题,使得锚(内联元素)的行为与框模型元素(display:block)相似。

display:inline-block

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励