伊人久久大香线蕉综合影视_日韩精品少妇无码受不了_71pao成人国产永久免费视频_国产伦片中文免费观看_国产高清无码麻豆精品_九色综合伊人久久富二代_日韩黄色精品_日韩A∨精品日韩精品无码

css的多行省略號處理

2018-5-30    周周

      在我們的頁面布局的時候，經(jīng)常會有這樣的需求，超過指定行文本的時候會進行（省略號...）的處理，那么我們改怎么設置css呢？如下：

 設置盒子的css為：

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

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



     WebKit瀏覽器或移動端的頁面（大部分移動端都是webkit）

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



        -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數(shù)。 為了實現(xiàn)該效果，它需要組合其他的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;


日歷

鏈接

個人資料

藍藍設計的小編 http://cqzjtgb.com

存檔

绵竹市| 旅游| 张家川| 麟游县| 突泉县| 芦溪县| 晋城| 广平县| 武川县| 巢湖市| 武宁县| 和顺县| 福州市| 柳州市| 抚远县| 徐汇区| 阿鲁科尔沁旗| 陆丰市| 垦利县| 乐安县| 讷河市| 城市| 堆龙德庆县| 曲松县| 万源市| 诏安县| 隆尧县| 峨边| 巩义市| 莱芜市| 睢宁县| 皮山县| 广元市| 宜黄县| 岳阳县| 郎溪县| 桃园县| 奉节县| 朔州市| 焦作市| 格尔木市|