当父 DIV 宽度按百分比设置时，防止文本溢出 DIV

Question

我知道有很多类似的帖子，但我已经阅读了 20 多个，我找到的解决方案对我没有帮助。

我的一些内容的布局类似于我在此处详述的布局：

小提琴示例

有一个包含 3 个子 div 的容器 div “Strip” ； img ， title ， description 。 包含 div 的固定宽度为 944px。

• 第一个 div img是固定大小。 这工作正常。
• 第二个 div title应自动调整大小以适应标题的长度。 这工作正常。
• 第三个 div description应该填充未使用的Strip Div 的剩余部分而不会溢出。 这是行不通的。

如果我将description div 设置为固定宽度大小，我可以让它工作，但这对我没有帮助，因为大小会根据标题的长度而改变。

我敢肯定这很简单，但我经历了很多次迭代，但都没有运气。

CSS：

  font-weight: bold;
}

.strip {
  width: 944px;
  max-width: 944px;
  display: inline-block;
  border: Solid;
  border-width: 2px;
  max-height: 28px;
  white-space: nowrap;   

}

.img {
  display: inline-block;
  border: solid;
  border-width: 1px;
  border-color: red;
  max-width: 50px;
  max-height: 28px;
  height: 28px;
  white-space: nowrap;
  text-wrap: hidden;


}

 .img p {   
  text-overflow: ellipsis;
  white-space: nowrap;   
  overflow: hidden;

 }


.title {
  display: inline-block;
  border: solid;
  border-width: 1px;
  border-color: green;
  max-height: 28px;


}

.title p {


  white-space: nowrap;   
  overflow: hidden;
}


.description {
  display: inline-block;
  border: solid;
  border-width: 1px;
  border-color: blue;
  max-height: 28px;


}

.description p {
  text-overflow: ellipsis;
  white-space: nowrap;   
  overflow: hidden;
}```


**HTML:**

```<html>
  <div class="strip">    


    <div class="img">
      <p>
        Test
      </p>
    </div>

     <div class="title">
      <p>
        Rotten Tomatoes
      </p>
    </div>

    <div class="description">
      <p>
        Rotten Tomatoes, home of the Tomatometer, is the most trusted measurement of quality for Movies & TV. Rotten Tomatoes, home of the Tomatometer, is the most trusted measurement of quality for Movies & TV.
      </p>
    </div>

  </div>

</html>```

Answer 1

Flexbox 可以做到：

 .strip { width: 90vw; display: flex; margin:auto; } .img { border: 1PX solid red; width: 50px; } .title { border: 1px solid green; white-space: nowrap; } .description { flex:1; border: 1px solid blue; min-width: 0; } .description p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

 <div class="strip"> <div class="img"> IMG </div> <div class="title"> <p> Rotten Tomatoes </p> </div> <div class="description"> <p> Rotten Tomatoes, home of the Tomatometer, is the most trusted measurement of quality for Movies & TV. Rotten Tomatoes, home of the Tomatometer, is the most trusted measurement of quality for Movies & TV. </p> </div> </div>