css的多行省略號處理

2018-5-30    雙雙 前端及開發文章及欣賞

      在我們的頁面布局的時候,經常會有這樣的需求,超過指定行文本的時候會進行(省略號。。。)的處理,那么我們改怎么設置css呢?如下:
設置盒子的css為:
  • overflow:hidden;;
  • text-overflow:ellipsis;
  • white-space:nowrap;
       但是這樣只能顯示一行而不能實現指定行,所以還要其他的方法來實現指定行處理的

     WebKit瀏覽器或移動端的頁面(大部分移動端都是webkit)
        可以直接使用WebKit的CSS擴展屬性(WebKit是私有屬性)-webkit-line-clamp ;注意:這是一個不規范的屬性,它沒有出現在 CSS 規范草案中。

        -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果,它需要組合其他的WebKit屬性。
       常見結合屬性:
  • display: -webkit-box; 必須結合的屬性 ,將對象作為彈性伸縮盒子模型顯示 。
  • -webkit-box-orient 必須結合的屬性 ,設置或檢索伸縮盒對象的子元素的排列方式 。
  • text-overflow: ellipsis;,可以用來多行文本的情況下,用省略號“…”隱藏超出范圍的文本 。
     css 代碼:
  • overflow:hidden;
  • text-overflow: ellipsis;
  • display: -webkit-box;
  • -webkit-line-clamp:2;/*這里控制著顯示多少行*/
  • -webkit-box-orient:vertical;

標簽: css3

日歷

鏈接

blogger

藍藍 http://www.thriveonsite.com

存檔

2019灰色暴力网赚 123彩票网 河北11选5走势图 秒速时时彩 互联网赚钱机器 刷钻网赚可信么吗 网赚平台是真的吗 吉林快3 网赚能赚到钱吗 中创网赚