用css3讓溢位內容顯示省略號

2021-09-07 03:59:31 字數 644 閱讀 5654

css3現在越來越普及了。給我們前端人員也帶來了極大的便利。以前要實現讓溢位的內容顯示省略號還得通過js實現,現在完全可以用css代替之。

主要的**如下:

顯示不出用省略號顯示不出用省略號

顯示不出用省略號顯示不出用省略號

顯示效果如下:

這個屬性並須要與overflow:hidden;white-space:nowrap;width:150px;一起用才會有效果!!

對於單行的我們可以用text-overflow:ellipsis;來實現,那對於多行有,有什麼辦法嗎??當然有!巨人的肩膀很結實的說。。

duang~duang~duang~歡迎我們的多行用省略號的方法隆重登場!

-webkit-line-clamp:***

為毛要用「-webkit-」,因為,它是乙個不規範的屬性,它沒有出現在 css 規範草案中。所以,盡量只在移動端使或在webkit瀏覽器用它吧。後面的***就是表示你想顯示的行數,如果你想顯示兩行,就是2。用它的時候,還需要用到其他的webkit屬性。要實現這樣的效果的全部**應該是:

對於更多實現讓溢位內容顯示省略號的方法大家可以移步至張鑫旭部落格,訪問如下鏈結即可:關於文字內容溢位用點點點(…)省略號表示

css控制溢位內容 用省略號代替顯示

如 xx 內容超過100px 溢位換行 可以用以下css 控制溢位內容用省略號代替 對於td 僅在td的css中使用 overflow hidden 是看不到效果的,寫法應該是 style type text css td style table width 100 border 1 cellpad...

css3實現文字溢位省略號( )顯示

css3實現文字溢位省略號 顯示,如下 片段 charset utf 8 無標題文件title type text css pstyle head css3實現單行文字溢位會顯示省略號 p body html overflow hidden 文字溢位隱藏 white space nowrap 文字不...

css3 多行文字溢位顯示省略號

參考 webkit line clamp用來限制在乙個塊元素顯示的文字的行數。為了實現該效果,它需要組合其他的webkit屬性。常見結合屬性 display webkit box 必須結合的屬性 將物件作為彈性伸縮盒子模型顯示 webkit box orient必須結合的屬性 設定或檢索伸縮盒物件的...