如果元素不适合div，则显示“查看全部”按钮

Question

我有两个div显示了它的一些内容：https://jsfiddle.net/u1zmo2qn/2/

<div id="div1"> </div> <div id="div2"> </div>

内容：

<div class="el"> This is a square </div> ..

当您按“查看全部”按钮时，它会显示其余内容。

问题是，如果内容适合div内部（如jsFiddle链接中的黄色div），则div可能不需要“全部显示”按钮。

我如何才能确定“显示所有内容”按钮仅显示是否必要？

如果可能的话，我希望它是纯CSS，但JS不会成为世界末日。

这可能吗？

div的内容将不断更新，如果可能，我宁愿不必处理屏幕调整大小事件或每次div的内容确实改变时做某事，只有在必要时才能完成“SHOW_MORE”按钮

谢谢， 大卫

Answer 1

您想要的所有限制实际上是不可能的。事实上，没有Javascript就不可能。虽然有一些创造力，但你可以做到这一点，这样你就可以编写一次代码，而不必在内容更新后考虑是否调用更新函数。

我已经更新了你的小提琴，做你想要的非常方便。 Fiddle here。关于此代码的最佳部分是，即使在内容因浏览器宽度和高度的变化而溢出的情况下，它也可以工作。请务必在目标浏览器中对其进行测试。

我使用了我最喜欢的浏览器黑客here。代码检测内容高度的变化。如果内容溢出其父级，则＆＃34;查看全部＆＃34;按钮显示。我不得不重新构建html，以便将tile放在一个div中，类为content和＆＃34;查看全部＆＃34;按钮有一个班级viewall。