文本展示隐藏

最新推荐文章于 2024-08-17 22:24:13 发布

web修理工

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量223

点赞数

分类专栏： JavaScript 文章标签： html5 css html

本文链接：https://blog.csdn.net/qq_42374676/article/details/120488043

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

隐藏形式一

    color: #000;
            background-color: #f00;
            text-indent: 5em;

        }

        /* //4就是需要在收起的时候显示的行数 */
        .packup:after {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-line-clamp: 4;
            content: attr(data-content);
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            text-indent: -4em;
            padding-right: 3em;
            color: #000;
            background-color: #ff0;
        }
    </style>
</head>


<body>

    <div class="summary packup"
        data-content="天空为什么是蓝色我们看到的天空，经常是蔚蓝色的，特别是一场大雨之后，天空更是幽蓝得象─泓秋水，令人心旷神怡，跃跃欲飞。天空为什么是蔚蓝色的呢?大气本身是无色的。天空的蓝色是大气分子、冰晶、水滴等和阳光共同创作的图景。阳光进入大气时，波长较长的色光，如红光，透射力大，能透过大气射向地面;而波长短的紫、蓝、青色光，碰到大气分子、冰晶、水滴等时，就很容易发生散射现象。被散射了的紫、蓝、青色光布满天空，就使天空呈现出一片蔚蓝了。天为什么是蓝的，而不是绿的或红的呢?首先你得明白一个道理:我们周围的事物之所以显现出颜色来，仅仅是因为阳光照射着它们。虽然阳光看上去是白色的，但是所有的颜色:赤、橙、黄、绿、青、蓝、紫，在阳光里都存在。天空里有这么多颜色，为什么我平时看到的只有蓝色呢?你可能会问。如果你把光线设想为波浪，你就会猜破这个谜了。光其实是像一个波浪那样在运动的。我们来设想一下一滴雨落在一个水洼里的情景。当这滴雨落到水面上时，就会产生小波浪，波浪一起一伏地变成更大的圈，向着四面八方扩展开去。如果这些波浪碰上一块小石子或一个别的什么障碍物，它们就会反弹回来，改变了波浪的方向。">
        <p class="content">
            天空为什么是蓝色我们看到的天空，经常是蔚蓝色的，特别是一场大雨之后，天空更是幽蓝得象─泓秋水，令人心旷神怡，跃跃欲飞。天空为什么是蔚蓝色的呢?大气本身是无色的。天空的蓝色是大气分子、冰晶、水滴等和阳光共同创作的图景。阳光进入大气时，波长较长的色光，如红光，透射力大，能透过大气射向地面;而波长短的紫、蓝、青色光，碰到大气分子、冰晶、水滴等时，就很容易发生散射现象。被散射了的紫、蓝、青色光布满天空，就使天空呈现出一片蔚蓝了。天为什么是蓝的，而不是绿的或红的呢?首先你得明白一个道理:我们周围的事物之所以显现出颜色来，仅仅是因为阳光照射着它们。虽然阳光看上去是白色的，但是所有的颜色:赤、橙、黄、绿、青、蓝、紫，在阳光里都存在。天空里有这么多颜色，为什么我平时看到的只有蓝色呢?你可能会问。如果你把光线设想为波浪，你就会猜破这个谜了。光其实是像一个波浪那样在运动的。我们来设想一下一滴雨落在一个水洼里的情景。当这滴雨落到水面上时，就会产生小波浪，波浪一起一伏地变成更大的圈，向着四面八方扩展开去。如果这些波浪碰上一块小石子或一个别的什么障碍物，它们就会反弹回来，改变了波浪的方向。
        </p>

        <!-- 关键的思路就是：用before显示的3行文字盖在after的文字上（before有个背景色，并且height很重要）；用after显示4行文字，并且after的右边padding-right一定的距离，使得省略号的右边能够空出一定的位置。

在收起的时候，给summary加上packup的class值；在展开的时候，去掉summary上的packup这个class值。就能够做到图例上的样子了。 通过定位动 按钮实现内容-->
    </div>
    <script>
        // let
    </script>
</body>

</html>

隐藏形式二

<!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>
</head>
<style>
    /*阅读全文*/
    #contTab {
        display: none;
    }

    .content-more {
        display: none;
    }

    #contTab:checked~#cont {
        max-height: 600px;
        overflow: hidden;
    }

    #contTab:checked~.content-more {
        display: block;
        position: relative;
        padding-top: 20px;
        padding-bottom: 30px;
        text-align: center;
    }

    #contTab:checked~.content-more .gradient {
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
        background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fff);
        background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0), #fff);
        height: 80px;
        position: absolute;
        left: 0;
        top: -79px;
        width: 100%;
    }

    #contTab:checked~.content-more .readmore {
        display: inline-block;
        background: #0067cb;
        color: #fff;
        width: 175px;
        height: 42px;
        border-radius: 42px;
        line-height: 42px;
        font-size: 16px;
        cursor: pointer;
    }
</style>

<body>
    <input type="checkbox" id="contTab" checked="checked" class="tabbed">
    <div id="cont">
        天空为什么是蓝色我们看到的天空，经常是蔚蓝色的，特别是一场大雨之后，天空更是幽蓝得象─泓秋水，令人心旷神怡，跃跃欲飞。天空为什么是蔚蓝色的呢?大气本身是无色的。天空的蓝色是大气分子、冰晶、水滴等和阳光共同创作的图景。阳光进入大气时，波长较长的色光，如红光，透射力大，能透过大气射向地面;而波长短的紫、蓝、青色光，碰到大气分子、冰晶、水滴等时，就很容易发生散射现象。被散射了的紫、蓝、青色光布满天空，就使天空呈现出一片蔚蓝了。天为什么是蓝的，而不是绿的或红的呢?首先你得明白一个道理:我们周围的事物之所以显现出颜色来，仅仅是因为阳光照射着它们。虽然阳光看上去是白色的，但是所有的颜色:赤、橙、黄、绿、青、蓝、紫，在阳光里都存在。天空里有这么多颜色，为什么我平时看到的只有蓝色呢?你可能会问。如果你把光线设想为波浪，你就会猜破这个谜了。光其实是像一个波浪那样在运动的。我们来设想一下一滴雨落在一个水洼里的情景。当这滴雨落到水面上时，就会产生小波浪，波浪一起一伏地变成更大的圈，向着四面八方扩展开去。如果这些波浪碰上一块小石子或一个别的什么障碍物，它们就会反弹回来，改变了波浪的方向。
    </div>
    <div class="content-more">
        <div class="gradient"></div> <label for="contTab" class="readmore">点击展开全文</label>
    </div>
</body>

</html>

隐藏形式三

<div class="pp" ref="desc" @click="audioplay($event)">
    <div v-for="(itme,index) in (desc&&desc.split('$_$'))" :key="index" v-html="itme"></div>

watch: {
    "pageDatelist.desc"() {
    let str = "";
    this.$nextTick(() => {
    let num = Math.ceil(
    (this.$refs.desc && this.$refs.desc.offsetWidth) / 14
    );
    if (num * 3 - 10 < this.pageDatelist.desc.length) { str=this.pageDatelist.desc && this.pageDatelist.desc.slice(0,
        num * 3 - 10) + "..." + `<span v-show="${this.isdesc}" data-audio='show'>点击展开</span>`;
        } else {
        str = this.pageDatelist.desc;
        this.isdesc = false;
        }
        this.desc = str;
        });
        },
        },

        // 监听内容
        audioplay(e) {
        console.log(e, "===e");
        // console.log(e.target.dataset.audio, "===");
        if (e.target.dataset.audio == "show") {
        this.textshow();
        }
        },
        textshow() {
        console.log(123);
        this.desc = this.pageDatelist.desc && this.pageDatelist.desc;
        this.isdesc = false;
        },

web修理工

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
文本展示隐藏

隐藏形式一 color: #000; background-color: #f00; text-indent: 5em; } /* //4就是需要在收起的时候显示的行数 */ .packup:after { display: -webkit-box; -webkit-box-orient: vertical; -webkit-bo
复制链接

扫一扫