css实现多行显示，超出部分以省略号代替

最新推荐文章于 2024-05-14 18:01:48 发布

前端切图仔Zz

最新推荐文章于 2024-05-14 18:01:48 发布

阅读量1.3k

点赞数

分类专栏： css和html 文章标签：前端 css3 css

本文链接：https://blog.csdn.net/Amouzy/article/details/123345843

版权

css和html 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

没处理之前

在这里插入图片描述

设置样式

给被包含元素设置以下样式（这里的案例是p元素）：

p{
  	overflow: hidden;
  	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

效果：

在这里插入图片描述

明显，已经实现了只展示两行，超出部分以省略号代替

其中：

overflow: hidden;的作用是隐藏溢出部分
display: -webkit-box;表示作为弹性伸缩盒子模型显示
-webkit-line-clamp: 2;该属性可以把块容器中的内容限制为指定的行数。这里意为限制为两行。（若想只展示一行，可把值设置为1）
-webkit-box-orient: vertical; 设置伸缩盒子的子元素排列方式。这里表示从上到下垂直排列子元素。

完整示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        div{height: 40px;width: 300px;border: 1px solid #333;}
        p{
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div>
        <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    </div>
</body>
</html>

拓展：

点击了解：css实现一行显示，超出部分以省略号代替

前端切图仔Zz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现多行显示，超出部分以省略号代替

没处理之前设置样式给被包含元素设置以下样式（这里的案例是p元素）：p{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}效果：明显，已经实现了只展示两行，超出部分以省略号代替其中：overflow: hidden;的作用是隐藏溢出部分display: -webkit-box;表示作为弹性伸缩盒子模型显示-webkit-
复制链接

扫一扫