html - 如何限制容器内的文本溢出？

Question

我正在做一个免费代码训练营元素，当我试图缩小这个网站的文本时从 width 设置为 "auto" 的容器溢出。文本从底部溢出，我不知道为什么。

我已经尝试过height: auto、height: 100% 等，但没有任何效果。

标记:

<section id="product-info">
    <img class="background-image" src="https://i.postimg.cc/50G4sHcs/water- 
     2208931.jpg" alt="">
    <div class="product-info-wrapper">
      <h1 class="product-info-title">Why our bottles?</h1>
      <p class="product-description">We offer bottled water cared for from 
      end to end with the idea of nothing ever becoming "waste". Our Better 
      Bottle and label are made from plants, non toxic and compostable. We 
      also offer collection for the bottles we sell, taking responsibility
        for our product post-sale and making sure that every bottle returned, 
       ends up in the correct facility, not the environment. We have been 
       developing our plant-based cap as currently, only plastic options are 
       available. The way we see it, if we
        are using plastic, it should be made from naturally renewable 
       materials and hold the ability to disappear after its useful life </p>
    </div>
  </section>

CSS:

#product-info {
  width: 100%;
  position: relative;
}

.background-image {
  width: 100%;

  height: 100%;

  object-fit: cover;

  max-height: 600px;
  filter: blur(1px) grayscale(70%);
}

.product-info-wrapper {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;

  /*   background: white;   */
  height: 100%;
  color: white;
}

.product-info-title,
.product-description {
  font-family: "Open Sans", sans-serif;
}

.product-info-title {
  font-family: "Kalam", cursive;
  /*   text-decoration: underline #271F30; */
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 35px;
}

.product-description {
  width: 80%;
  line-height: 1.8;
  /*   height: 150px; */
  /*   padding: 10px 20px 25px ; */
}

我希望在调整窗口大小时文本能够响应并且我不想隐藏它，我只希望它能够响应地缩小。

你能给我点建议吗？

Answer 1

将 word-wrap: break-word 添加到您的 CSS

对于文本响应，您可以使用 vw 单位 https://www.w3schools.com/cssref/css_units.asp