4

子ノードを持つ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>

このコードをブラウザーでレンダリングすると、最初の 3 つのタグが表示されますが、4 番目のタグは半分にカットされています。この 4 番目の項目が代わりに完全に非表示になるように、CSS を構成するにはどうすればよいですか?

4

1 に答える 1