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標籤加了css省略號限制,那麼li下的子元素a標籤裡的內容實現了限制效果,這個效果的呈現

在谷歌瀏覽器上文字超出省略號代替在火狐瀏覽器上沒有限制,文字超出換行

一開始分析問題以為是火狐樣式不相容的問題,就去查,網上一大堆的人搞出來用

::before::after

絕對定位的形式在文字後面拼接content : " ... "

對此無語並且感到不恥, 這不就等於皇帝的新衣自己騙自己嗎… 文字一旦少的情況下, 那三個點依然在最後的位置??? 文字到…之間的空白鬧著玩呢?

找了同事請教了一下, **了一下給li標籤和給a標籤加限制的區別

事實就是,在新聞專欄

寫法情況下

把a標籤設定為塊,display:block;

給個寬度width:100%

給限制white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

完事,**在ff瀏覽器上也是實現的文字溢位省略號**

css實現單行 多行超出顯示省略號相容火狐

css 單行，超出部分顯示省略號 p補充 white space，它主要是用來處理元素內文字的空白符 換行符以及是否允許折行。可選值包括normal 預設 pre nowrap pre wrap pre line。word wrap，是用來標明是否允許瀏覽器在單詞內進行斷句，為了防止當乙個字串太長而...

溢位文字顯示省略號,相容常用瀏覽器

js裡有個判斷就是當樣式裡出現text overflow或者 o text overflow的時候，便不會執行這段js。因為支援這兩個屬性的瀏覽器可以自己實現ellipsis效果。具體呼叫如 或者以上是通過classname或者組建id來呼叫js函式。xul方式 首先，我們建立xul，它應該被儲存為...

webkit瀏覽器下多行顯示，有省略號效果

多行顯示情況 display webkit box webkit line clamp 3 webkit box orient vertical overflow hidden 除了上述，還有其他的解決方法，但要相容其他瀏覽器，還是比較麻煩的 可以通過設定高度來解決。另外，剛剛測試了一種方法 spa...