Укорачивание текста в блоке относительно ширины блока ⇐ CSS

[Anonymous]

Проблема в тексте. Имеется карточка с информацией фиксированной ширины, состоящая из 3-х частей (чекбокс, инфо, статус). Флажок и статус имеют фиксированную ширину, а оставшееся пространство занимает информация. В инфоблоке 2 блока, которые включают в себя описание информации в блоке и ссылку на него (блок 1 в 2 раза меньше блока 2 (необязательно)). Ссылка очень длинная и ее нужно укоротить многоточием. Этого легко добиться, если блок содержит только текст. А вот если есть другие блоки, то все выходит за рамки.
Пример кода вставляю ниже. Приложение создано на Next JS, поэтому, если в ответе используется React, то ок.

bbb


description

aaaaaaaaaaaaaaaaaa
copy



description

aaaaaaaaaaaaaaaaaa



status


.card {
display: flex;
align-items: end;
width: 400px;
gap: 10px;
padding: 10px;
border-radius: 10px;
background-color: gray;
}

.card__checkbox {
display: flex;
justify-content: center;
align-items: center;
height: 65px;
border-radius: 5px;
background-color: lightblue;
}

.card__status {
display: flex;
justify-content: center;
align-items: center;
height: 65px;
border-radius: 5px;
background-color: lightgreen;
}

.card__info {
display: flex;
gap: 10px;
}

.info-block {
display: flex;
flex-direction: column;
max-width: 100%;
gap: 5px;
padding: 5px;
border-radius: 10px;
background-color: bisque;
}

.info-block__text-wrapper {
display: flex;
gap: 10px;
padding: 10px;
background-color: gainsboro;
border: 1px solid red;
border-radius: 5px;
}

.info-block__text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


Потратил около 3 часов, а результата так и не было. Я пробовал много способов. Я много раз спрашивал gpt и все безрезультатно. Ближайший результат, который я получил, был с обычным текстовым блоком.

bbbbbbb

aaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaa

bbbbbbbbbbbbbb


.wrapper {
display: flex;
align-items: center;
width: 200px;
gap: 10px;
}

.b {
flex-shrink: 0;
}

.childs-wrapper {
display: flex;
flex-grow: 1;
max-width: 100%;
gap: 5px;
overfrow: hidden;
}

.child {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.child1 {
flex: 1;
}

.child2 {
flex: 2;
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... -the-block