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

Question

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

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

Fiddle Example

有一个容器div"Strip"装着3childdiv； img、title、description。包含 div 的固定宽度为 944px。

第一个divimg是固定尺寸。这很好用。
第二个 div title 应该自动调整大小以适应标题的长度。这很好用。
第三个divdescription应该填满剩余的StripDiv不溢出。这是行不通的。

如果我将 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>

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

Prevent text overflowing DIV when parent DIV width is set by percentage

css

overflow