Заставить div занимать оставшееся пространство внутри другого div для переполнения текста: многоточие; работать ⇐ Html

[Anonymous]

Я пытаюсь создать «карточки» для моих проектов, и я хочу, чтобы отображалось описание, но если оно слишком длинное, мне нужно обрезать текст и… поместить его в конец. Я не могу заставить это работать с «переполнением текста: многоточие»; однако текст просто выходит за пределы, как на этом снимке экрана:


Вот мой код:

Код: Выделить всё

.project-card {
display: flex;
flex-direction: column;
width: 220px;
height: 220px;
}

.project-card .thumbnail {
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 100%;
height: 140px;
flex-wrap: nowrap;
}
.project-card .thumbnail img {width: 100%; height: auto;}

.project-card .lable {
display: flex;
flex-direction: row;
justify-content: space-between;
overflow-wrap: break-word;
gap: 10px;
width: 100%;
}

.project-card .lable .title {
display: inline;
max-width: 70%;
}

.project-card .lable .tag {
display: inline;
border-radius: 2px 2px;
margin-bottom: auto;
background-color: rgb(222, 224, 226);
}

.project-card .sub {
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1;
}

Код: Выделить всё

[img]https://picsum.photos/seed/picsum/50/50[/img]

Project
v1.0.0

Really long test string for description really long test string for description really long test string for description

Спасибо за любую помощь, также извините, если это плохой пост, поскольку я публикую его впервые.

Подробнее здесь: https://stackoverflow.com/questions/782 ... w-ellipsis