停止SVG覆盖高度

Question

我有一个伪造的div：以前，这具有SVG作为内容。但是SVG比DIV更长，并且不断发展。如何阻止这种情况发生？

   body {
      background: #333333;
    }
    
    .pseudo--code {
      height: 300px;
      max-height: 300px;
      padding-left: 20px;
    }
    .pseudo--code:before {
      position: absolute;
      content: url("https://d33wubrfki0l68.cloudfront.net/96dbb28f6281e8f1cda214c22b571de137716690/bdc12/assets/numbers-light.svg");
      width: 10em;
      left: 10px;
      overflow-x: hidden;
      overflow-y: hidden;
      opacity; 0.1;
      max-width: 100%;
      max-height: 100%;
    }
    
    .pseudo--code:after, .pseudo-code:before {
      content: "";
      position: absolute;
      bottom: 0;
      top: 0;
    }

<div>
      <h1> This is a heading</h1>
      <div class="pseudo--code">
        <h> this is a second heading</h>
      </div>
      <h2>this is also a heading</h>
    </div>



 

还制作了Codepen https://codepen.io/losk.io/loskey/loskwantos/pen/pen/pen/nwypvvy

Answer 1

将高度添加到您的.pseudo-编码：之前，它将解决您的问题。如果您的元素的大小固定，则溢出有效

body {
  background: #333333;
}

.pseudo--code {
  height: 300px;
  max-height: 300px;
  padding-left: 20px;
}
.pseudo--code:before {
  position: absolute;
  content: url("https://d33wubrfki0l68.cloudfront.net/96dbb28f6281e8f1cda214c22b571de137716690/bdc12/assets/numbers-light.svg");
  width: 10em;
  left: 10px;
  overflow-x: hidden;
  overflow-y: hidden;
  opacity; 0.1;
  max-width: 100%;
  max-height: 100%;
  height:300px;
}

.pseudo--code:after, .pseudo-code:before {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
}

<div>
  <h1> This is a heading</h1>
  <div class="pseudo--code">
    <h> this is a second heading</h>
  </div>
  <h2>this is also a heading</h>
</div>
  

Answer 2

添加溢出：隐藏到pseudo-code类。
并删除位置：从pseudo-code中删除：之前。

body {
  background: #333333;
}

.pseudo--code {
  height: 300px;
  max-height: 300px;
  padding-left: 20px;
  overflow: hidden;
}
.pseudo--code:before {
  content: url("https://d33wubrfki0l68.cloudfront.net/96dbb28f6281e8f1cda214c22b571de137716690/bdc12/assets/numbers-light.svg");
  width: 10em;
  left: 10px;
  opacity; 0.1;
  max-width: 100%;
  max-height: 100%;
}

.pseudo--code:after, .pseudo-code:before {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
}

<div>
  <h1> This is a heading</h1>
  <div class="pseudo--code">
    <h> this is a second heading</h>
  </div>
  <h2>this is also a heading</h>
</div>
  

更新
回应您的评论。此示例适用于其他高度。在下面的示例中，我将高度提高到500px。

body {
  background: #333333;
}

.pseudo--code {
  height: 500px;
  padding-left: 20px;
  overflow: hidden;
}
.pseudo--code:before {
  content: url("https://d33wubrfki0l68.cloudfront.net/96dbb28f6281e8f1cda214c22b571de137716690/bdc12/assets/numbers-light.svg");
  width: 10em;
  left: 10px;
  opacity; 0.1;
  max-width: 100%;
  max-height: 100%;
}

.pseudo--code:after, .pseudo-code:before {
  content: "";
  position: absolute;
  bottom: 0;
  top: 0;
}

<div>
  <h1> This is a heading</h1>
  <div class="pseudo--code">
    <h> this is a second heading</h>
  </div>
  <h2>this is also a heading</h>
</div>