在不影響內部內容的情況下更改div的寬度

Question

我想創建一組svg圖像並將其放置在div中。 當該div調整大小（在javascript中）時，我希望更改寬度，而不更改其內部內容，從而提供調整后的div覆蓋內容的效果（例如，將div的寬度減半將使隱藏的內容一半）。

是否可以通過html？

這是一個js小提琴 。 當您按下按鈕時，div寬度將更改為較小的尺寸。 我希望它隱藏svg的一部分。

<div id="container">

 <svg width="400" height="280">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"></rect>


  <rect x="90" y="50" rx="20" ry="20" width="150" height="150" style="fill:blue;stroke:black;stroke-width:5;opacity:0.5"></rect>
 </svg>

</div>

Answer 1

這是使用CSS的快速修復，不需要JavaScript。 您可以使用overflow屬性隱藏哪些“溢出”。

將隱藏的溢出添加到#container ：

#container{
    width:50%;
    background-color:white;
    overflow: hidden;
}

您可以在修改小提琴后再試一次

另外，您的小提琴還有其他幾件事：您在條件語句中沒有使用== 。 即使您是，也需要一種以動態寬度開始的方法。 因此，這是一個固定的小提琴 ，僅使用JS更改。

最后，我會根據是否已將類添加到該元素來添加/刪除類，在方式上稍有不同。 您可以在此提琴上查看一下

Answer 2

將overflow：hidden或overflow：scroll添加到您的CSS

#container{
  width:50%;
  background-color:red;
  Overflow:hidden;
}