如何解决：CSS/HTML 中的文本溢出 DIV？

Question

我有一个包含背景图像的 DIV (.main)。 TOS 文本覆盖背景图像。当浏览器 window 扩展时一切都很好，但是一旦我将它缩小太多，TOS 中的文本就会溢出图像。

您可以通过访问我的网站并调整 window 的大小来实时查看问题。 https://royalkingdom.net/store/

我已经尝试过填充、边距、最大高度和最大宽度。

/* Main column */
.main {
  flex:60%;
  height:940px;
  margin-bottom:10vh;
  padding-right:8%;
}
#bgimg {
 position: relative;
 height:100%;
 width:100%;
 background-image: url("https://i.imgur.com/NPhmcae.png");
 background-size: 100%;
 background-repeat: no-repeat;
 background-position:center top; ;
 display: block;
 padding-top:13%;
 padding-right:10%;
 padding-left:10%;
 padding-bottom:13%;

}
.panel-body {
  text-align:justify;
  padding:1px;
  width: auto;
  max-height: 100%;
  display: inline-block;

}

我希望文本适合图像大小。即使我调整浏览器 window。如果需要滚动条就好了（当window尺寸太小的时候）

Answer 1

请尝试代码 -

.panel-body {
    text-align: justify;
    padding: 1px;
    width: auto;
    max-height: 75vh;
    display: inline-block;
    overflow-y: scroll;
}

Answer 2

我觉得你需要补充的是background-size: 100% 100%;

看看我设置的这个 JSFiddle 来模仿你的 div。第二个 100% 强制图像成为 div 的整个宽度，因为图像没有随着 div 的高度扩展。如果你在 JSFiddle 中去掉第二个 100%，你会看到红色边框仍然扩大但图像没有。

#div2{
    background-image:url(https://i.imgur.com/NPhmcae.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position:center top;
    display: block;
    padding-top:13%;
    padding-right:10%;
    padding-left:10%;
    padding-bottom:13%;
    height:auto;
    width:auto;
    border: 1px solid red;
}

<div id="div2">
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit.
  </p> 
</div>

您可能会遇到的一个问题是，如果您的文字太少 much/too，图像就会严重变形。

如何解决：CSS/HTML 中的文本溢出 DIV？

How to fix: Text overflowing DIV in CSS/HTML?

html

css

overflow