首页 > 其他分享 >CSS实现文本一行垂直居中,两行垂直居中,超出两行文字显示省略号的方法

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

时间:2023-01-10 13:57:06浏览次数:53  
标签:居中 两行 省略号 垂直 webkit overflow

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

<!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>

  

 

标签:居中,两行,省略号,垂直,webkit,overflow
From: https://www.cnblogs.com/ranyonsue/p/17040085.html

相关文章