zoukankan      html  css  js  c++  java
  • 移动端文本超出设定行数后省略的方法

    因为移动端绝大部分是WebKit内核的浏览器,如果纯粹的要实现文本在超出规定行数后,其余内容省略并加上“...”,可以直接使用WebKit私有属性:-webkit-line-clamp来实现

    css代码

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

    html代码

    <div class="box">001A航母的建成标志着中国成为世界上少数几个可以独立建造航母的国家,由于中国处在快速发展蓝水海军的进程中,在不远将来中国拥有多支航母编队是可以预期的,中国建设强大海军的帷幕真正拉开了。</div>

    那如果还需要有一个展开全部和收起的操作,那光用css是无法实现的。

    这边推荐一个比较成熟的jQuery插件-jQuery.dotdotdot 下载地址

    首先引入jquery.js和dotdotdot.js

    html代码

    <div class="dotbox">
      001A航母的建成标志着中国成为世界上少数几个可以独立建造航母的国家,由于中国处在快速发展蓝水海军的进程中,在不远将来中国拥有多支航母编队是可以预期的,中国建设强大海军的帷幕真正拉开了。
    </div>

    css代码

    .dotbox.opened {height: auto;}/*展开后容器高度自适应*/
    .dotbox .close,.dotbox .open,.dotbox.opened .open {display: none;}/*默认展开收起按钮隐藏,展开时展开按钮隐藏*/
    .dotbox.is-truncated .open,.dotbox.opened .close {display: inline-block;}/*超出规定行数展开按钮显示,展开后收起按钮显示*/
    .dotbox{line-height: 18px;height:36px;color: #333;}
    .more-btn{display:block;color: #333;line-height: 18px;}
    .toggle{display:block;}

    js代码

    <script type="text/javascript">
        $(function(){
            var $dot = $('.dotbox');
            $dot.append('<a class="toggle"><span class="more-btn open">查看全部</span><span class="more-btn close">收起</span></a>');
            function createDots() {
                $dot.dotdotdot({
                    after: 'a.toggle'
                });
            }

            function destroyDots() {
                $dot.trigger('destroy');
            }
            createDots();
            $dot.on(
                'click',
                'a.toggle',
                function() {
                    $dot.toggleClass('opened');
                    if ($dot.hasClass('opened')) {
                        destroyDots();
                    } else {
                        createDots();
                    }
                    return false;
                }
            );
        })
    </script>
  • 相关阅读:
    一、模板的渲染
    十六、ajax上传图片 mvc
    十五、API请求接口-远程服务器返回错误: (400) 错误的请求错误
    九、操作(在结果中搜索+查询该表,单独几个字段查询,通过子查询方式查询)
    一、Vue分页实现
    【2019-10-29】除非你变成你自己
    【2019-10-28】美好在于细节心态
    【2019-10-27】理智是罗盘,感情是大风
    【2019-10-26】日积月累的小惠生者
    【2019-10-25】从错误和失败中获得经验
  • 原文地址:https://www.cnblogs.com/kevinxue/p/6756716.html
Copyright © 2011-2022 走看看