css實現(xiàn)文本多行省略號的方法

這篇文章給大家分享的是有關css實現(xiàn)文本多行省略號的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站主要從事成都網站建設、網站設計、網頁設計、企業(yè)做網站、公司建網站等業(yè)務。立足成都服務溆浦,10年網站建設經驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792

css實現(xiàn)文本多行省略號的方法：1、使用【text-overflow:ellipsis】屬性實現(xiàn)單行文本省略；2、使用屬性【webkit-box-orient: vertical】實現(xiàn)多行文本省略。

css實現(xiàn)文本多行省略號的方法：

如果實現(xiàn)單行文本的溢出顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要加寬度width屬來兼容部分瀏覽。

實現(xiàn)單行文本省略

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin:0 auto ;
                width:300px;
                color: red;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div>單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略單行文本省略</div>
    </body>
</html>

結果

css實現(xiàn)文本多行省略號的方法

實現(xiàn)多行文本省略

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin: 0 auto;
                width: 300px;
                color: red;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div>
    </body>
</html>

結果

css實現(xiàn)文本多行省略號的方法

容，更多請關注創(chuàng)新互聯(lián)其它相關文章！

感謝各位的閱讀！關于“css實現(xiàn)文本多行省略號的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

新聞標題：css實現(xiàn)文本多行省略號的方法
文章轉載：http://jinyejixie.com/article24/peosce.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供外貿建站、定制網站、網頁設計公司、、企業(yè)建站、網站排名

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

css實現(xiàn)文本多行省略號的方法