一種完美的文字溢位省略號解決方案

2021-08-26 20:57:53 字數 375 閱讀 1379

我們都知道 css 裡有個 text-overflow: ellipsis 這個的作用是當你定義了元素的寬度時,如果元素裡的文字內容超出定義的寬度,則會在文字末尾顯示"…",這樣文字(鏈結)列表會看起來整齊美觀,可惜的是 目前只有 ie 完美支援這個屬性,其它瀏覽器均不支援。

為解決這個問題,google 了半天都不能令我滿意,基本都是說的純css方法,經測試這種方法並不完美,後來終於找到了,基於 jquery 外掛程式的解決方法,經測試該方法在各主流瀏覽器裡均表現完美。

首先你需要定義一段css,類似下面這樣

.overflow

然後 jquery 呼叫這個 ellipsis() 函式即可。$(

".overflow")

.ellipsis();

css 文字溢位省略號

css 文字溢位後顯示省略號,這是乙個非常常規的操作,但是你會發現在網上很多給出的例子兩行之後顯示省略號,卻沒有用。這是為什麼呢?please look follow。在一行省略的 text oneline簡單介紹下 white space 這個是處理空白符的,但是這東西還不是這麼簡單的。這是一些文...

css實現文字溢位省略號

css常用屬性 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行,只能顯示一行 這個只是用適用於單行文字溢位情況,之前處理多行文字的話需要js來支援。css3新加屬性 display we...

6 文字溢位省略號

單行 單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行單單行單行 單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行 單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行單行 行單行單行單行單行單行單行單行單行單行單行單行單行單行單行...