css省略号在火狐浏览器下不兼容的问题

最近涨了一个关于css省略号的知识

写一下总结,方便以后回忆起来

一个很基本的知识点, 导航栏超出限制字数后显示省略号

通用限制写法

 /* 显示一行，省略号 */
 
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
 
/* 显示两行，省略号 */
 
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;

重点描述纠结场景!!!

我是这样的结构写的

<li><a>新闻专栏</a></li>

给li标签加了css省略号限制,那么li下的子元素a标签里的内容实现了限制效果,这个效果的呈现

1. 在谷歌浏览器上文字超出省略号代替
2. 在火狐浏览器上没有限制,文字超出换行

一开始分析问题以为是火狐样式不兼容的问题,就去查,网上一大堆的人搞出来用

::before ::after

绝对定位的形式在文字后面拼接content : " ... "

对此无语并且感到不耻, 这不就等于皇帝的新衣自己骗自己吗… 文字一旦少的情况下, 那三个点依然在最后的位置??? 文字到…之间的空白闹着玩呢?

找了同事请教了一下, 探究了一下给li标签和给a标签加限制的区别

事实就是,在 <li><a>新闻专栏</a></li>写法情况下

把a标签设置为块, display:block;

给个宽度width:100%

给限制white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

完事,**在ff浏览器上也是实现的文本溢出省略号**

事后有时间了我觉得还是得研究一下a标签的特殊性