CSS实现文本一行垂直居中，两行垂直居中，超出两行文字显示省略号的方法

实现单行垂直居中，两行垂直居中，超过两行省略…显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        div{
            font-size: 18px;
            height: 46px;
   			line-height: 23px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
        }
    </style>
</head>
<body>
    <div>
        <span>单行居中，两行居中</span>
    </div>
</body>
</html>

　　

 

posted on 2023-01-10 13:43  ranyonsue  阅读(616)  评论(0)  编辑  收藏  举报

导航