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

在您的CSS中添加自动换行：断行

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

Answer 2

只需将字体大小动态调整为可用的屏幕宽度即可。将您的自定义计算作为默认值：

.product-description {
  font-size: calc(10px + (100vw / 200));
}

然后，通过媒体查询设置最大宽度

@media screen and (min-width: 800px) {
  .product-description {
    font-size:16px;
  }
}

上面的示例的最小字体大小为10像素，每200像素可用屏幕宽度将其增加1。例如：屏幕宽度：600px =>字体大小13px

仍然，您需要小心处理长文本。您可能会不可避免地遇到“阅读更多”按钮/链接的情况。

PS：IE不支持object-fit。如果您依赖于该浏览器，请重做CSS以使用：

background-image: url"(myImage.jpg"); background-size: cover;

Answer 3

*{
  word-break: all;
}

您可以使用任何所需的选择器：）希望对您有所帮助。

如何限制容器中的文本溢出？

3 个答案: