html5 - 网页文字默认显示固定行数，点击按钮显示全部怎么实现？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html5 - 网页文字默认显示固定行数，点击按钮显示全部怎么实现？

PHPz 2017-04-17 13:55:59

[HTML讨论组]

929

上图所示，默认显示固定行数，点击箭头显示全部内容，
目前是使用 -webkit-line-clamp 实现，但是过渡的时候没有动画效果，大家有什么别的方法吗？

补充：
需做的时一个列表样式的，由于内容不实固定的，是后台传入的，有些内容多，有些内容少，所以没有办法设置一个固定的高度。

PHPz

学习是最好的投资！

全部回复(10)

阿神2017-04-17 13:57:59 10楼

设置固定高，overflow:hidden，点击时候逐渐增加高度到全部显示，不知道行不行

赞 +0

添加回复

伊谢尔伦2017-04-17 13:57:59 9楼

实现的方式不少，可以用css动画，也可以用jquery等，个人思路：
先设置一个固定高度，点击箭头，换个高度即可，例如：

          <!DOCTYPE html>
            <html>
              <head>
                <meta charset="utf-8">
                <title></title>
                <style>
                   .h{
                     transition: all 3s ease;
                     overflow: hidden;
                   }
                   .h20{
                      height: 20px;
                   }
            
                   .h20:hover{
                      height: 400px;
                   }
                </style>
              </head>
              <body>
                <p class="h h20">撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡</p>
              </body>
            </html>

赞 +0

添加回复

大家讲道理2017-04-17 13:57:59 8楼

方法很多很多,随便说个jq的.
比如line-height:24px;
要固定显示5行

.p{height:120px;line-height:24px;overflow:hidden}
.p_all{height:auto;}

搞个按钮

<a href='javascript:test()' id='test_btn'>全部</a>
function test(){
$('.p').toggleClass('.p_all');
if($('.p_all').length>0){$('#test_btn').html('收起');}else{$('#test_btn').html('全部');};
}

赞 +0

添加回复

PHP中文网2017-04-17 13:57:59 7楼

建议使用css的transation, 设置p点击前后的height, 与展开动画，动画时间，就可以简单实现，完全不用js，js控制dom元素做动画是非常低效的，动画效果不应该考虑用它实现

赞 +0

添加回复

天蓬老师2017-04-17 13:57:59 6楼

http://codepen.io/bran93/pen/... 把transiton用于max-height,但是有一个问题就是max-height 不好确定

赞 +0

添加回复

迷茫2017-04-17 13:57:59 5楼

我的看法还是简单的外部一个p为.outer设置
overflow:hidden:
固定好line-height和height
内部设置一个p为.inner
获取.inner的高度
点击按钮时让外部p高度animate到内部p的高度就好了
html:

<p class="outer">
    <p class="inner">Promises/A+规范首先要明白的的几个词:解决(fulfill):我们现在也常说是resolve,表示promise成功时的一系列操作 拒绝(reject):表示promise失败时的一系列操作 终值(eventual value):promise被fulfill时传递给解决回调的值,由于promise是一次性的,所以当该值被传递时,也就是promise的结束,所以称为终值,当然有时我们简称为值(value) 拒因(reason):被拒绝时传递给reject回调的值 异常(exception):throw抛出的值 Promise:拥有then方法的对象或函数,行为符合本规范 thenable:定义了then方法的对象或函数,拥有then方法 promise很简单,就和我们上一篇那样,作为一个三个状态的有限状态机那样,详细的规定嘛 传送门:图灵社区Promises/A+规范 http://www.ituring.com.cn/article/66566 then方法的定义:接受onFulfilled,onRejected两个函数(不是函数就不认你!),这个就是我们上篇提到的then(undefined,onRejected)兼容catch()的原因啦
    </p>
</p>

css

.outer{
  overflow:hidden;
  width:300px;
  height:120px;
  font-size:12px;
  line-height:12px;
  background:#ccc;
}

javascripte

var inner = $(".inner");
var outer = $(".outer");
console.log("inner-height"+inner.css("height"));
outer.on("click",function(){
  outer.animate({height:inner.css("height")});
})

简单的写了下

赞 +0

添加回复

黄舟2017-04-17 13:57:59 4楼

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin: 0;padding:0;list-style: none;}
body{background: #333;font-size: 14px;font-family:"微软雅黑"}
a{color: #333;text-decoration: none;}
.hidden{ display: none;}
.lanren{width: 800px;height: auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;}
.lanren ul.list{overflow: hidden;}
.lanren ul.list li{width: 150px;height: 150px;margin:5px;float: left;overflow: hidden;}
.lanren ul.list li img{width: 100%;height: 100%;}
.lanren ul.list p{text-align: center;padding: 10px;}
.lanren .more{overflow: hidden;padding:10px;text-align: center;}
.lanren .more a{display: block;width: 80px;padding:8px 0;color:#fff;margin:0 auto;background:#333;text-align:center;border-radius:3px;}
.lanren .more a:hover{text-decoration: none;background: red;color: #fff;}
</style>

</head>
<body>

<!--代码部分begin-->
<p class="lanren">
    <p class="hidden">
        <li><img src="images/1px.gif" realSrc="images/lanren01.jpg" width="150" height="150" />33</li>
        <li><img src="images/1px.gif" realSrc="images/lanren02.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren03.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren04.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren05.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren06.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren07.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren08.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren09.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren10.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren11.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren12.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren13.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren14.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren15.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren16.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren17.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren18.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren19.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren20.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren21.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren22.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren23.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren24.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren25.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren26.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren27.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren28.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren29.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren30.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren31.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren32.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren33.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren34.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren35.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren36.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren37.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren38.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren39.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren40.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren41.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren42.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren43.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren44.jpg" width="150" height="150" /></li>
        <li><img src="images/1px.gif" realSrc="images/lanren45.jpg" width="150" height="150" /></li>
    </p>
    <ul class="list">数据加载中，请稍后...</ul>
    <p class="more"><a href="javascript:;" onClick="lanren.loadMore();">加载更多</a></p>
</p>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
    var _content = []; //临时存储li循环内容
    var lanren = {
        _default:10, //默认显示图片个数
        _loading:5,  //每次点击按钮后加载的个数
        init:function(){
            var lis = $(".lanren .hidden li");
            $(".lanren ul.list").html("");
            for(var n=0;n<lanren._default;n++){
                lis.eq(n).appendTo(".lanren ul.list");
            }
            $(".lanren ul.list img").each(function(){
                $(this).attr('src',$(this).attr('realSrc'));
            })
            for(var i=lanren._default;i<lis.length;i++){
                _content.push(lis.eq(i));
            }
            $(".lanren .hidden").html("");
        },
        loadMore:function(){
            var mLis = $(".lanren ul.list li").length;
            for(var i =0;i<lanren._loading;i++){
                var target = _content.shift();
                if(!target){
                    $('.lanren .more').html("<p>全部加载完毕...</p>");
                    break;
                }
                $(".lanren ul.list").append(target);
                $(".lanren ul.list img").eq(mLis+i).each(function(){
                    $(this).attr('src',$(this).attr('realSrc'));
                });
            }
        }
    }
    lanren.init();
</script>
<!--代码部分end-->

</body>
</html>

赞 +0

添加回复

怪我咯2017-04-17 13:57:59 3楼

你试一下用transition过渡。
html:

<p class="p">
  <label for="checkbox" class="array"></label>
  <input type="checkbox" id="checkbox" >
  <p>
    阿萨德路附近的律师费费了圣诞节快废了附近的搜救分类晒单飞机离开圣诞节傅雷家书老地方水电费老地方将诶就发了啥地方苏打绿分开就发了啥地方阿萨德路附近的律师费费了圣诞节快废了附近的搜救分类晒单飞机离开圣诞节傅雷家书老地方水电费老地方将诶就发了啥地方苏打绿分开就发了啥地方阿萨德路附近的律师费费了圣诞节快废了附近的搜救分类晒单飞机离开圣诞节傅雷家书老地方水电费老地方将诶就发了啥地方苏打绿分开就发了啥地方
  </p>
</p>

css:

.p{
  line-height:25px;
  width:200px;
  position:relative;
  background:#f00;
  padding-bottom:10px;
}
.array{
  position:absolute;
  bottom:10px;
  left:0;
  right:0;
  margin:auto;
  width:10px;
  height:10px;
  border:2px solid #000;
  border-left:0;
  border-top:0;
  transform:rotate(45deg);
}
.p input{
  display:none;
}
.p p{
  height:100px;
  overflow:hidden;
  transition: all 2s;
  -webkit-transition: all 2s;
}
.p input:checked+p{
  height:450px;
}

赞 +0

添加回复