Question

我有一个带有子节点的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，以便完全隐藏第四个项目？

Answer 1

您可以在包含div的位置强制高度，然后移除white-space:nowrap。额外的项目将换行到下一行但由于overflow:hidden而无法看到它们。

如果它被父母的溢出：隐藏属性切断，如何完全隐藏子元素？

1 个答案: