gpt4 book ai didi

html - 如果子元素被父元素的溢出切断,如何完全隐藏子元素 :hidden property?

转载 作者:行者123 更新时间:2023-11-28 13:11:42 27 4
gpt4 key购买 nike

我有一个带有子节点的 div 元素。此 div 设置为隐藏任何溢出。然而,我注意到如果一个子元素溢出这个父元素 div 然后它被切断。如果这个特定的子元素溢出其父元素,我更希望将其完全隐藏。

这是一些示例 HTML:

<html>
<head>
<title></title>
<style>
#tags {
width: 120px;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body>
<div id="tags">
<span class="tag"><a href="#tag1">tag 1</a></span>
<span class="tag"><a href="#tag2">tag 2</a></span>
<span class="tag"><a href="#tag3">tag 3</a></span>
<span class="tag"><a href="#tag4">tag 4</a></span>
<span class="tag"><a href="#tag5">tag 5</a></span>
<span class="tag"><a href="#tag6">tag 6</a></span>
<span class="tag"><a href="#tag7">tag 7</a></span>
<span class="tag"><a href="#tag8">tag 8</a></span>
<span class="tag"><a href="#tag9">tag 9</a></span>
</div>
</body>
</html>

在浏览器中呈现此代码会显示前三个标记,但第四个标记被减半。我如何构造我的 CSS,以便完全隐藏这第四个元素?

最佳答案

您可以在包含的 div 上强制设置高度并删除 white-space:nowrap。额外的元素将换行到下一行,但由于 overflow:hidden 而不会被看到。

关于html - 如果子元素被父元素的溢出切断,如何完全隐藏子元素 :hidden property?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18854436/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com