HTML(多行)文本超过部分隐藏,末尾显示(...)

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>