CSS3实现单行、多行文本溢出(省略号的形式出现)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p {
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                margin: 0 auto;
                background: #ccc;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            div {
                display: block;
                display: -webkit-box;
                max-width: 300px;
                height: 109.2px;
                margin: 10px auto;
                font-size: 26px;
                line-height: 1.4;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <p>文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出</p>
        <div>文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出</div>
    </body>

</html>

原文地址:https://www.cnblogs.com/lhl66/p/9105196.html