超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

css的多行省略號(hào)處理

2018-5-30    周周

      在我們的頁(yè)面布局的時(shí)候,經(jīng)常會(huì)有這樣的需求,超過指定行文本的時(shí)候會(huì)進(jìn)行(省略號(hào)...)的處理,那么我們改怎么設(shè)置css呢?如下:

設(shè)置盒子的css為:

  • overflow:hidden;;
  • text-overflow:ellipsis;
  • white-space:nowrap;

       但是這樣只能顯示一行而不能實(shí)現(xiàn)指定行,所以還要其他的方法來實(shí)現(xiàn)指定行處理的。



     WebKit瀏覽器或移動(dòng)端的頁(yè)面(大部分移動(dòng)端都是webkit)

        可以直接使用WebKit的CSS擴(kuò)展屬性(WebKit是私有屬性)-webkit-line-clamp ;注意:這是一個(gè)不規(guī)范的屬性,它沒有出現(xiàn)在 CSS 規(guī)范草案中。



        -webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù)。 為了實(shí)現(xiàn)該效果,它需要組合其他的WebKit屬性。
       常見結(jié)合屬性:
  • display: -webkit-box; 必須結(jié)合的屬性 ,將對(duì)象作為彈性伸縮盒子模型顯示 。
  • -webkit-box-orient 必須結(jié)合的屬性 ,設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。
  • text-overflow: ellipsis;,可以用來多行文本的情況下,用省略號(hào)“…”隱藏超出范圍的文本 。

     css 代碼:

  • overflow:hidden;
  • text-overflow: ellipsis;
  • display: -webkit-box;
  • -webkit-line-clamp:2;/*這里控制著顯示多少行*/
  • -webkit-box-orient:vertical;


分享本文至:

日歷

鏈接

個(gè)人資料

存檔