• 文本内容显示三行,多余部分显示...,点击全部展开


    H5 使文本内容显示三行,多余部分显示...,点击全部展开




    CSS部分:
    .mui-ellipsis-3 {
        display: -webkit-box;
        overflow: hidden;
        white-space: normal!important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .innerCtn{
    text-indent: 1rem;
    line-height: 0.8rem;
    font-size: 0.5rem;
    }

    HTML部分
    <div class="innerCtn">
    <span class="mui-ellipsis-3">《心理游戏》是由Propaganda Films发行的悬疑电影,由大卫·芬奇执导,迈克尔·道格拉斯、西恩·潘领衔主演,
    该片于1997年9月12日在美国上映。该片讲述了亿万富翁尼古拉斯在弟弟的指引下,参与了CRS俱乐部的游戏。</span>
    </div>

    jQuery部分代码:
    <script type="text/javascript">
    $(function(){//显示三行 多余隐藏 点击展开
    $('.innerCtn').click(function(){
    $(this).children(0).removeClass('mui-ellipsis-3');
    });
    });
    </script>

  • 相关阅读:
    300+值得收藏的设计师免费资源站
    Apache 隐藏入口文件 index.php
    Nginx 虚拟主机下支持Pathinfo并隐藏入口文件的完整配置
    Java多线程
    Java注解
    Java异常机制
    面向对象
    数组
    Java方法(函数)
    Java流程控制(Scanner)
  • 原文地址:https://www.cnblogs.com/WebApp-DotNet/p/8202780.html
Copyright © 2020-2023  润新知