overflow:hidden后获取内容实际高度

2 个回答

得票最新

raohong

1.3k1711

发布于
2020-06-16

scrollHeight

zangeci

14.8k71731

发布于
2020-06-16

方法一：先获取再改变overflow的值。【弊端：大多数情况下会导致页面重排，性能、体验都不是很好】
方法二：clone改元素出来并用定位使其脱离文档流，获取高度后移除。【弊端：感觉并不是很通用，子元素结构样式复杂的话似乎不是很适合】。
目前能想到就这两个方案，第二个方法见如下DEMO：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test {
            max-height: 1em;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <p class="test">是的旅客房间空间了可时间段风控进店SD卡了尖峰时刻发的顺丰是路口的房间是的开发叫老师房间SD卡坚实的离开房间SD卡了房价老师的减肥老师的咖啡姐可适当费坚实的离开费坚实的离开房间的快乐飞见识到了快乐可是放大镜受得了</p>
    <script>
        var test = document.querySelector('.test');
        var cp = test.cloneNode(true)
        cp.style.cssText = 'all: unset;position: absolute;opacity:0;';
        test.parentElement.appendChild(cp);
        console.log(cp.offsetHeight);
        cp.remove()
    </script>
</body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

overflow:hidden后获取内容实际高度

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

前端代码更新如何通知用户刷新页面？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？

为什么会出现CORS error？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？

图片沿着圆环的转动有什么方法吗？