css控制顯示行數,多出部分顯示省略號


  webkit-line-clamp:number;控制行數, 是一個 不規范的屬性(unsupported WebKit property),它沒有出現在 CSS 規范草案中。為了實現該效果,它需要組合其他外來的WebKit屬性。常見結合屬性:

  display: -webkit-box; 必須結合的屬性 ,將對象作為彈性伸縮盒子模型顯示 。

  -webkit-box-orient:vertical;控制文本行數的方向,這是一個 必須結合的屬性 ,設置或檢索伸縮盒對象的子元素的排列方式 。

  text-overflow:ellipsis;,可以用來多行文本的情況下,用省略號“...”隱藏超出范圍的文本 。

  overflow:hidden;超出部分隱藏。

這個控制行數的方式出現的省略號在寬度和字體行數寬度剛好相近邊緣時,樣式不受hover控制,解決方法是通過js動態控制display屬性。

比如

1,$('div').on('mouseover',function(){

  $(this).css("display","block").css("color","red").css("display","-webkit-box");

})

$('div').on('mouseleave',function(){

  $(this).css("display","block").css("color","#333").css("display","-webkit-box");

})

2,改變字體大小,加一像素或者減一像素

3,改變父盒子寬度


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM