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

joy_mhy

已于 2022-08-14 16:27:16 修改

阅读量1.3k

点赞数

分类专栏： css 文章标签： vue 前端

于 2022-03-23 17:19:14 首次发布

原文链接：https://blog.csdn.net/hong521520/article/details/118484191?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_aa&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

joy_mhy

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS实现文本一行垂直居中，两行垂直居中，超出两行文字显示省略号的方法

实现单行垂直居中，两行垂直居中，超过两行省略…显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display:-webkit-box; -webkit-line-clamp:2;
复制链接

扫一扫