溢位文字省略顯示(非擷取)

2021-08-27 10:24:46 字數 665 閱讀 7136

1.div中文字顯示在一行,並將溢位的文字省略顯示

web標準常見問題大全web標準常見問題大全

web標準常見問題大全web標準常見問題大全

web標準常見問題大全web標準常見問題大全

web標準常見問題大全web標準常見問題大全

web標準常見問題大全web標準常見問題大全

這樣查出div的文字就會以省略的形式顯示,並不是單獨的擷取。不滿意還可以加個title滑鼠放上顯示

想要div以省略的形式顯示的時候,只單獨設定text-overflow:ellipsis;是沒有效果的。因為它僅僅是註解,標註溢位時以省略的形式顯示。所以必須要有white-space:nowrap,讓文字顯示子一行,又需要用overflow:hidden來使溢位的內容隱藏。

2.計算乙個字串的長度

因為每個瀏覽器計算字串的長度的方法不一樣,所以在使用省略顯示的時候可能會造成在不同的瀏覽器中顯示的效果不一樣。所以想要知道乙個字串的長度,可以將它放到乙個span標籤,即string1string2.然後使用jquery中的width()方法就可以得到在不同的瀏覽器中該字串的長度了,即$("span").width()。

借鑑此文:

文字省略顯示

效果 與多年不見的朋友相聚。露天咖啡廳,裊裊的咖啡香,落日映紅霞,餘暉灑落在我們身邊,如一幅陣年遺香的掛畫。歲月橫隔在彼此間,那些遙遠的念想溶入靜美的年華中,時光宛如遲暮美人,盈水邀月,橫笛玉音,輕紗漫舞。只是 如花美眷,又怎敵似水流年。div 2.js contents conts each fu...

CSS3溢位文字省略

1 doctype html 2 html 3 head 4 meta charset utf 8 5 title 文字多餘部分隱藏 title 6 style 7.content 13span 16 單行省略顯示 17 main 2223 多行省略顯示 24 main1 34style 35hea...

CSS 文字溢位省略顯示

實現文字顯示單行或多行,超出部分用省略號顯示是乙個很常見的需求,在這裡做個分享記錄。文末有 demo 演示 下面是單行縮略的實現 overflow hidden text overflow ellipsis white space nowrap 注 要在塊級元素設定 單行縮略很簡單,唯一比較生疏的是...