css实现一行居中显示,两行靠左显示,超过两行以省略号省略

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin:0;
            padding:0;
            font-family:微软雅黑;
            color:#555
        }
        .container {
            width:320px;
            padding:0 10px;
            margin:10px auto;
            background:#ddd
        }
        h2 {
            text-align:center;
            padding:10px 0
        }
        h2 p {
            display:inline-block;
            text-align:center
        }
        h2 p span {
            text-align:left;
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical
        }
    </style>
</head>
<body>
    <div class="container">
        <h2><p><span>我是单行标题居中</span></p></h2>
        <h2><p><span>我是两行标题两行标题两行标题居左</span></p></h2>
        <h2><p><span>我是超过两行的标题最后省略号省略我是超过两行的标题最后省略号省略标题最后省略号省略</span></p></h2>
    </div>
</body>
</html>
Last modification:June 27, 2020
如果觉得我的文章对你有用,请随意赞赏