4

I have a div element with child nodes. This div is set up to hide any overflow. However, I've noticed that if a child element overflows this parent div then it is cut off. What I would prefer would be for this specific child element to be hidden completely if it overflows its parent.

Here's some example 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>

Rendering this code in a browser shows the first three tags, but the fourth is cut in half. How can I structure my CSS so that this fourth item would be hidden completely instead?

4

1 回答 1

6

div您可以在 contains和 remove上强制设置高度white-space:nowrap。额外的项目将换行到下一行，但由于overflow:hidden.

于 2013-09-17T18:21:26.113 回答