html - 怎么样控制div显示的内容超过设定高度就会自动折叠起来?
伊谢尔伦
伊谢尔伦 2017-04-17 11:38:05
[HTML讨论组]

怎样可以实现p显示的内容超过设定高度就会自动折叠起来,然后点击展开/收起按钮可以展开全部内容或者把内容收起来?

类似于这种:

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(4)
巴扎黑

我觉得这里像是根据文字的个数来判断的,如果超出了规定的字数,那么只显示前面一部分文字。
我写了一个简单的DEMO: http://codepen.io/CodingMonkeyzh/pen/Jdprxv

巴扎黑

1、如果指定高度,用js来判断容器高度,达到指定高度后控制内容的折叠/展开

2、如果容器的高度是被内容撑开的,可以考虑设定字符数来控制折叠/展开

            function()
            {
                 var maxwidth=150;
                 if($(this).text().length>maxwidth)
                 {
                    $(this).text($(this).text().substring(0,maxwidth));
                    $(this).text($(this).text()+'......');
                 }
            }

当字符数超过150时,就折叠超出部分的内容

怪我咯

实现思路是:检测一下文字的个数,超过的话,使用summary和details元素显示隐藏文字,不需要额外的使用css和js,可以参考一下文档:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

阿神

你把那个功能网址发过来,我分析一下,它是怎么实现的,靠css做到多行省略,对于我来说,做不到。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号