text-overflow: ellipsis为什么有时候不生效

当对a标签应用如下样式时，超出部分显示省略号并不能起作用

a {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

这是因为text-overflow: ellipsis对块状元素才会生效，a标签默认是行内元素，所以就没有效果了。解决办法如下，将a标签设置为块状元素即可。

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

如果觉得我的文章对您有用，请您随意打赏。您的支持将鼓励我更加努力创作！

如无特殊声明，文章均为原创，若有不正之处，万望告知。转载请附上原文地址，十分感谢！