有没有办法在 JavaScript 中隐藏部分显示的 div(或者可能使用一些 CSS 魔法)。
我的设置有一个固定宽度的父 div,带有 overflow: hidden
和 white-space: nowrap
(所以 div 不会流到下一行)。本质上,我不希望子 div(可变宽度和 display: inline-block
)在溢出时进入下一行,因为它破坏了布局。
由于子 div 具有可变宽度并且不会中断到 div 的下一个“行”,因此其中一些从 View 中隐藏,而一些仅部分显示。如果它们是隐藏的,那很好,但是部分显示的 div 看起来很傻(它们包含文本,所以有时会显示一半)。
子 div 是通过 JS 以编程方式添加的,以响应实时数据,所以我无法知道随着宽度的变化有多少适合。我只想隐藏那些溢出 div 边缘的内容(overflow: hidden
)或部分显示。
有没有一种简单的方法可以隐藏那些部分显示的 div?我真的不想查询子 div 的宽度,因为其他一些内容需要刷新很多,我不想用不必要的 DOM 属性查询来减慢刷新速度。
<div style='overflow: hidden; white-space: nowrap; max-width: 500px'>
<div style='display: inline-block'> some text </div>
<div style='display: inline-block'> some text </div>
<div style='display: inline-block'> some text </div>
<div style='display: inline-block'> partially shown </div>
<div style='display: inline-block'> hidden </div>
<div style='display: inline-block'> hidden </div>
</div>
最佳答案
正如我在评论中提到的,您可以使用 jQuery
.position()
。然后,您将遍历内部 div
并检查它们相对于容器的 右上角
位置。
围绕这些行的东西:
CSS(仅供演示)
div div {
background-color: red;
width: 130px;
}
Javascript (jQuery)
$(function() {
$("div div").each(function(index, element) {
// By adding the element width to its left position you have the right
// position, which is not provided by the jQuery .position() method.
var rightPos = $(this).position().left + $(this).width();
var containerWidth = $(this).parent().width();
// If the element top right corner position is outside its parent right edge,
// it's being partially displayed, so hide it and also its subsequent
// siblings.
if (rightPos > containerWidth) {
$(this).hide().nextAll().hide();
// Break the loop to save resources.
return false;
}
});
});
关于javascript - 隐藏部分显示的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24181969/