HTML(多行)文本超過部分隱藏，末尾顯示(...)

本文轉載自查看原文 2020-01-13 04:53 1609 HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML(多行)文本超過部分隱藏,末尾顯示(...)</title>
    </head>
    <style>
        /* 一行 */
        .overline {
            max-width: 200px;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 一行 */
        .overline1 {
            max-width: 200px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 多行 */
        .overline2 {
            max-width: 200px;
            display: -webkit-box;
            -webkit-line-clamp: 2;/* 行數 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    <body>
        <p class="overline">
            演示演示演示演示演示演示演示演示演示演示演示演示
            演示演示演示演示演示演示演示演示演示演示演示演示
            演示演示演示演示演示演示演示演示演示演示演示演示
            演示演示演示演示演示演示演示演示演示演示演示演示
        </p>
        
        <p class="overline1">
            演示演示演示演示演示演示演示演示演示演示演示演示
            演示演示演示演示演示演示演示演示演示演示演示演示
            演示演示演示演示演示演示演示演示演示演示演示演示
            演示演示演示演示演示演示演示演示演示演示演示演示
        </p>

        <p class="overline2">
            演示演示演示演示演示演示演示演示演示演示演示演示
            演示演示演示演示演示演示演示演示演示演示演示演示
            演示演示演示演示演示演示演示演示演示演示演示演示
            演示演示演示演示演示演示演示演示演示演示演示演示
        </p>
    </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML中文本過長時自動隱藏末尾部分或中間等任意部分 html5文本超過指定行數隱藏顯示省略號 html單行、多行文本溢出隱藏 HTML標簽怎么隱藏或顯示 html最多顯示兩行,css 實現兩行或多行文本溢出顯示省略號（...） html制作，點擊文字超鏈接顯示文本框，再點擊文字超鏈接隱藏文本框表單下拉列表、多行文本、隱藏域 ant-vue a-table和內嵌div/p 一行顯示文本，給超出部分隱藏鼠標顯示整體內容 text-overflow文本溢出隱藏“...”顯示文本內容超過N行折疊並顯示“...查看全部”