使用css3截斷文本並加省略符號

來源:互聯網
上載者:User

代碼展示:

overflow : hidden;/*text-overflow: ellipsis; 有些樣本裡需要定義該屬性,實際可省略*/display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

概述

-webkit-line-clamp是一個不規範的屬性(unsupported WebKit property),它沒有出現在 CSS 規範草案中。

限制在一個塊元素顯示的文本的行數。 為了實現該效果,它需要組合其他外來的WebKit屬性。常見結合屬性:

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

-webkit-box-orient 必須結合的屬性,設定或檢索伸縮盒對象的子項目的相片順序 。

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

全部代碼:

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>css3截取字串多行</title><style>.box { width: 400px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}</style></head></p> <p><body><div class="box">css3截取字串多行,css3截取字串多行,css3截取字串多行,css3截取字串多行,css3截取字串多行,</div></body></html>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.