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;
}