css怎么实现多行文本溢出隐藏(2)-木庄网络博客

直接隐藏溢出部分是不是不好看，我们可以将溢出部分隐藏并显示省略号：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS如何使文本溢出部分显示省略号？多行超出</title>
        <style>
            *{margin: 0px;padding: 0px;}
            .box{
                width: 280px;
                height: 62px;
                margin: 50px auto;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }
        </style>  
    </head>
    <body>
        <div class="box">
            css 实现多行文本超出长度显示省略号，css 实现多行文本超出长度显示省略号，
            css 实现多行文本超出长度显示省略号
        </div>
    </body>
</html>