如何约束容器内溢出的文本？答案

【问题标题】：How to constrain the text overflowing within a container?如何约束容器内溢出的文本？
【发布时间】：2019-11-29 02:31:57
【问题描述】：

我正在开发一个免费代码营项目，当我尝试缩小此站点时，文本从 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 ; */
}

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

你能告诉我吗？

【问题讨论】：

它实际上是响应式的：codepen.io/anon/pen/OKVNMN，也许你只是认为它被隐藏了，因为你的文字是白色背景上的白色？
@BernardPagoaga 我的意思是它从我的背景图像容器的底部溢出我该怎么做才能阻止它？
那么你需要你的背景图片更大，所以你需要从你的.background-image中删除一些css。我更新了codepen。
这是一个选项吗？ codepen.io/topicstarter/pen/oKXxBr
@MaximLensky 它弄乱了图像在我的情况下没有选项

标签： html css media-queries overflow responsive

【解决方案1】：

在你的 CSS 中添加 word-wrap: break-word

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

【讨论】：

自动换行仅在侧面有效吗？不在高度上？
如果你有一个固定的高度并且文本有一个更高的高度ot会溢出，删除你的 max-height:600px 它将正常工作
有什么方法可以让文本像我收缩时一样在容器内收缩
你可以使用 vw 单位，1vw 单位是视口宽度的 1%，所以如果你减小视口宽度，文本会调整它的 font-size 为：font-size:3vw
我更新了我的答案，如果它解决了你的问题，请接受它

【解决方案2】：

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

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

然后，使用媒体查询设置最大宽度

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

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

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

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

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

【讨论】：

谢谢，但我仍然不知道 calc 是如何工作的，我得研究一下。

【解决方案3】：

*{
  word-break: all;
}

你可以使用任何你想要的选择器:) 希望对你有帮助。

【讨论】：