css文字两行或者几行显示省略号

最新推荐文章于 2024-07-19 15:50:46 发布

择一城终老...

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量3.2w

点赞数 7

文章标签： css line-clamp 多则显示省略号

本文链接：https://blog.csdn.net/qq_37026273/article/details/80604336

版权

一行显示否则省略号

.line-clamp1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

两行显示多则显示省略号

.line-clamp2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

下面是直接可以拿来看效果的代码需要设置宽度的


<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>line-clamp</title>
    <style>
        .shareBox .shareState .item{
            width: 291px;
            height: 157px;
            border: 1px solid #dfdfdf;
            padding: 0px 10px 10px;
        }
        p{
            margin: 0px;
            margin-top: 10px;
        }
        p.name{
            font-size: 20px;
            font-weight: bold;
        }
        .line-clamp{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>

<div>
    <!--动态渲染数据-->
    <div class="shareBox">
        <!--分享-->
        <div class="shareState">
            <div class="item"> 
                <p class="name">面朝大海,春暖花开</p>
                <p class="line-clamp">
                    从明天起，做一个幸福的人 喂马、劈柴，周游世界                
                    从明天起，关心粮食和蔬菜 我有一所房子，面朝大海，春暖花开                               
                    从明天起，和每一个亲人通信 告诉他们我的幸福  那幸福的闪电告诉我的
                    我将告诉每一个人 给每一条河每一座山取一个温暖的名字 陌生人，我也为你祝福 愿你有一个灿烂的前程 愿你有情人终成眷属 愿你在尘世获得幸福      
                </p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

择一城终老...

关注

7
点赞
踩
22

收藏

觉得还不错? 一键收藏
2
评论
css文字两行或者几行显示省略号

一行显示否则省略号.line-clamp1 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}两行显示多则显示省略号.line-clamp2 { overflow: ...
复制链接

扫一扫