当前位置：文江博客话题详情

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

发布于 2022-09-04 01:12:18 字数 303 浏览 14 评论 0

图片描述

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

辞别 2022-09-11 01:12:18

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

回复收藏 0

一江春梦 2022-09-11 01:12:18

实现的方式不少，可以用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>
                <div class="h h20">撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡</div>
              </body>
            </html>

回复收藏 0

可是我不能没有你 2022-09-11 01:12:18

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

回复收藏 0

执笔绘流年 2022-09-11 01:12:18

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

回复收藏 0

深海蓝天 2022-09-11 01:12:18

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

<div class="outer">
    <div 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()的原因啦
    </div>
</div>

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

温馨耳语 2022-09-11 01:12:18

<!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-->
<div class="lanren">
    <div 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>
    </div>
    <ul class="list">数据加载中，请稍后...</ul>
    <div class="more"><a href="javascript:;" onClick="lanren.loadMore();">加载更多</a></div>
</div>
<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

笑红尘 2022-09-11 01:12:18

你试一下用transition过渡。
html:

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

css:

.div{
  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);
}
.div input{
  display:none;
}
.div p{
  height:100px;
  overflow:hidden;
  transition: all 2s;
  -webkit-transition: all 2s;
}
.div input:checked+p{
  height:450px;
}

回复收藏 0