After extensively searching through over 20 similar posts, I have not been able to find a solution that works for my specific issue.
The layout of some content I'm working with resembles the example provided here:
In this layout, there is a container div named "Strip" that contains 3 child divs: img, title, and description. The container div has a fixed width of 944px.
- The first div,
img, has a fixed size and functions correctly. - The second div,
title, should adjust its size automatically based on the title length, and it's working fine. - The third div,
description, should occupy the remaining space within theStripDiv without overflowing. Unfortunately, this functionality is not working as expected.
I managed to achieve the desired effect by setting a fixed width for the description div, but this approach doesn't work well when the title length varies.
Although I believe the solution might be simple, I haven't had any luck after trying multiple approaches.
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;
}