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

该文章由 leevare 发布于 ,归类于 HTML/CSS

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

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

相关文章:

说点什么

avatar
300
  Subscribe  
提醒