css 自定义文字多行省略

最新推荐文章于 2023-04-03 15:31:58 发布

神奇大叔

最新推荐文章于 2023-04-03 15:31:58 发布

阅读量210

点赞数

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

本文链接：https://blog.csdn.net/weixin_43294560/article/details/127617666

版权

css 专栏收录该内容

63 篇文章 2 订阅

订阅专栏

文章目录

通常解决方案
自定义省略内容方案

通常解决方案

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

缺点：
- 兼容性
- 无法自定义省略内容表现

自定义省略内容方案

准备两个浮动元素
- 一个占位盒子：高度和要换行的高度相同（比如文字第三行高度为60px）
- 一个省略内容的盒子

<!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>
        .box__text {
            width: 100%;
            line-height: 20px;
            background-color: pink;
            float: right;
        }

        .box__placeholder {
            width: 60px;
            height: 60px;
            background-color: gray;
            opacity: 0.8;
            float: right;
        }

        .box__more {
            width: 60px;
            text-align: right;
            background: yellow;
            float: right;        
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 文字盒子 -->
        <div class="box__text">腾讯以技术丰富互联网用户的生活。通过通信及社交软件微信和 QQ 促进用户联系，并助其连接数字内容和生活服务，尽在弹指间。</div>
        <!-- 占位盒子 -->
        <div class="box__placeholder"></div>
        <!-- 自定义省略盒子 -->
        <div class="box__more">...展开</div>
    </div>
</body>

</html>

在这里插入图片描述

通过margin-left负值，将占位浮动盒子上移

.box__text {
    width: 100%;
    line-height: 20px;
    background-color: pink;
    float: right;
    margin-left: -60px;
}

在这里插入图片描述

文字多行撑开空间时，改变省略盒子位置
- 占位盒子的宽度必须和省略盒子的宽度一致，这样当文字第三行换行撑开时，父容器才有足够的宽度容纳省略盒子

.box__placeholder {
    width: 60px;
	//...
}

.box__more {
    width: 60px;
	//...
}

在这里插入图片描述

通过定位，使得未到三行时省略盒子隐藏，超过三行显示在末尾

.box {
    position: relative;
    width: 100%;
    max-height: 60px;
    overflow: hidden;
}

.box__more {
    width: 60px;
    text-align: right;
    background: yellow;
    float: right;
    position: relative;
    //100%是父元素的宽度，未超过三行时，会定位在盒子外面，所以会隐藏
    //当超过三行时，省略盒子在最左边，再通过100%+translate刚好能定位到末尾
    left: 100%;
    transform: translate(-100%, -100%);
}

在这里插入图片描述
代码示例：

<!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>
        .box {
            position: relative;
            width: 100%;
            max-height: 60px;
            overflow: hidden;
        }

        .box__text {
            width: 100%;
            line-height: 20px;
            background-color: pink;
            float: right;
            margin-left: -60px;
            overflow: hidden;
        }

        .box__placeholder {
            width: 60px;
            height: 60px;
            background-color: gray;
            opacity: 0.8;
            float: right;
        }

        .box__more {
            width: 60px;
            text-align: right;
            background: yellow;
            float: right;
            position: relative;
            left: 100%;
            transform: translate(-100%, -100%);
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 文字盒子 -->
        <div class="box__text">阿啊以技术丰富互联网用户的生活。通过通信及社交软件啊啊和 WW 促进用户联系，并助其连接数字内容和生活服务，尽在弹指间。</div>
        <!-- 占位盒子 -->
        <div class="box__placeholder"></div>
        <!-- 自定义省略盒子 -->
        <div class="box__more">...展开</div>
    </div>

    <script>

    </script>
    <script src="./1.js"></script>
</body>

</html>