标签第一行有文字，设置其余行空白占位(多行省略)

最新推荐文章于 2024-06-26 18:40:25 发布

闹闹没有闹

最新推荐文章于 2024-06-26 18:40:25 发布

阅读量111

点赞数

分类专栏： html css 文章标签： css3 css javascript

本文链接：https://blog.csdn.net/qq_41893686/article/details/109695408

版权

html 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

6 篇文章 1 订阅

订阅专栏

核心代码如下：

		height: 68px;
        line-height: 34px;			//  可要可不要，为了垂直居中好看些
        display: -webkit-box;
        -webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

display: -webkit-box; 设置流媒体格式
-webkit-box-orient: vertical; 设置排列方式
-webkit-line-clamp: 2; 设置几行
必须要设置高度 高度=第一行高度*几行

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        span {
            height: 68px;
            /* line-height: 34px; */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
    </style>
</head>

<body>
    <div class="content">
        <span>标签文字</span>
        <a href="javascript:;">测试</a>
    </div>
</body>

</html>

闹闹没有闹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签第一行有文字，设置其余行空白占位(多行省略)

核心代码如下： height: 68px; line-height: 34px; // 可要可不要，为了垂直居中好看些 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; display: -webkit-box; 设置流媒体格式-webkit-box-orient: vertical; 设置排列.
复制链接

扫一扫