當頁面文字過多時，怎麼用css使超出部分顯示省略號？（單/多行程式碼演示）-css教學-PHP中文網

當頁面文字過多時，怎麼用css使超出部分顯示省略號？（單/多行程式碼演示）

藏色散人

發布： 2018-08-09 16:04:19

原創

2472 人瀏覽過

當一個頁面文字過於冗長時，不僅不利於使用者視覺上的感受，更不利於網站內的最佳化。那我們要怎麼使用css超出部分顯示省略號來代替呢？本篇文章就給大家詳細介紹css超出部分顯示省略號怎麼實現的？希望對有需要的朋友有幫助！

css超出部分顯示省略號具體範例程式碼如下：##

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css超出部分省略显示测试</title>
    <style>
        .app {
            width: 400px;
            height: 28px;
            line-height: 28px;
            margin: 50px 0 0 50px;
            border: 1px solid red;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="app">
    <span class="content">php中文网(php.cn)提供大量免费、原创、高清的php视频教程,在学习的时候可以直接在线修改示例,查看php执行效果是本站的一大特色,php从入门到精通，一站式php自学平台。</span>
</div>
</body>
</html>

登入後複製

效果如下圖：

當頁面文字過多時，怎麼用css使超出部分顯示省略號？（單/多行程式碼演示）

註：以上是實作單行文字的溢位顯示省略號用text-overflow:ellipsis屬性，還需要加寬度width屬來相容部分瀏覽。

那麼單行知道如何操作，多行就簡單了。多行的實作方法主要是以下程式碼：

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;

登入後複製

css超出省略部分相容適用範圍：

因使用了WebKit的CSS擴充屬性，該方法適用於WebKit瀏覽器及行動裝置；

註：

-webkit-line-clamp用來限制在一個區塊元素顯示的文字的行數。為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：

display: -webkit-box; 必須結合的屬性，將物件作為彈性伸縮盒子模型顯示。

-webkit-box-orient 必須結合的屬性，設定或檢索伸縮盒物件的子元素的排列方式。

以上是當頁面文字過多時，怎麼用css使超出部分顯示省略號？（單/多行程式碼演示）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

當頁面文字過多時，怎麼用css使超出部分顯示省略號？ （單/多行程式碼演示）

當頁面文字過多時，怎麼用css使超出部分顯示省略號？（單/多行程式碼演示）