css-文本超出指定行數則顯示省略號

-webkit-line-clamp
說明:
限制在一個塊元素顯示的文本的行數。
-webkit-line-clamp 是一個 不規(guī)范的屬性(unsupported WebKit property),它沒有出現在 CSS 規(guī)范草案中。

為了實現該效果,它需要組合其他外來的WebKit屬性。常見結合屬性:

display: -webkit-box; 必須結合的屬性 ,將對象作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 ,設置或檢索伸縮盒對象的子元素的排列方式 。
text-overflow,可以用來多行文本的情況下,用省略號“...”隱藏超出范圍的文本 。

使用:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>超出指定行數省略號</title>
  <style>
  .box{
    width: 500px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  </style>
</head>
<body>
  <div class="box">HTML 標簽原本被設計為用于定義文檔內容。通過使用標簽,HTML 的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的信息。同時文檔布局由瀏覽器來完成,而不使用任何的格式化標簽。

由于兩種主要的瀏覽器(Netscape 和 Internet Explorer)不斷地將新的 HTML 標簽和屬性(比如字體標簽和顏色屬性)添加到 HTML 規(guī)范中,創(chuàng)建文檔內容清晰地獨立于文檔表現層的站點變得越來越困難。

為了解決這個問題,萬維網聯盟(W3C),這個非營利的標準化聯盟,肩負起了 HTML 標準化的使命,并在 HTML 4.0 之外創(chuàng)造出樣式(Style)。

所有的主流瀏覽器均支持層疊樣式表。</div>
</body>
</html>

瀏覽器支持情況:

line-clamp.png

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容