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

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

我的一些内容的布局类似于我在这里详细介绍的布局：

小提琴示例

有一个容器div "条带">，可容纳 3 个子div;img、title、description。包含div 的固定宽度为 944px。

第一个divimg是固定大小。这工作正常。
第二个divtitle应自动调整大小以适应标题的长度。这工作正常。
第三个divdescription应填充未使用的StripDiv 的其余部分，而不会溢出。这是行不通的。

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

我相信这很简单，但我经历了这么多次迭代，但没有运气。

.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>```

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>

相关内容

最新更新

热门标签：