Сокращение текста в блоке, относительно ширины блока

Question

Проблема заключается в тексте. Есть карточка с информацией с фиксированной шириной, состоящий из 3 частей(чекбокс, инфа, статус). Чекбокс и статус имеют фиксированную ширину, а инфа занимает оставшееся место. В блоке инфы 2 блока в которые входит описание информации в блоке и ссылка на нее (блок 1 в 2 раза меньше блока 2). Ссылка является очень длинной и необходимо её сокращать троеточием. Этого легко достичь, если в блоке только текст. А если там еще и другие блоки то все выходит за границы.

Вставляю примерный код внизу. Приложение на Next JS, так что если в ответе будет использован реакт, то ок.

.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;
}

        <div class="card">
            <div class="card__checkbox">bbb</div>
            <div class="card__info">
                <div class="info-block">
                    <span class="info-block__description">description</span>
                    <div class="info-block__text-wrapper">
                        <span class="info-block__text">aaaaaaaaaaaaaaaaaa</span>
                        <button class="info-block__copy-button">copy</button>
                    </div>
                </div>
                <div class="info-block">
                    <span class="info-block__description">description</span>
                    <div class="info-block__text-wrapper">
                        <span class="info-block__text">aaaaaaaaaaaaaaaaaa</span>
                    </div>
                </div>
            </div>
            <div class="card__status">status</div>
        </div>

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

.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;
}

<div class='wrapper'>
  <div class='b'>bbbbbbb</div>
  <div class='childs-wrapper'>
    <div class='child child1'><span>aaaaaaaaaaaaaaaaaaaaaaaa</span></div>
    <div class="child child2"><span>aaaaaaaaaaaaaaaaaaaaaaaa</span> <div class='c'></div></div>
  </div>
  <div class='b'>bbbbbbbbbbbbbb</div>
</div>

Answer 1

Пофиксил:

.card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    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 {
    position: relative;
    display: flex;
    gap: 10px;
    background-color: red;
    overflow: hidden;
}

.info-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 5px;
    border-radius: 10px;
    background-color: bisque;
    flex: 0 1 30%;
    overflow: hidden;
}

.info-block-1 {
    flex: 1 1 30%;
}

.info-block-2 {
    flex: 2 1 30%;
}

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

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

<div class="card">
    <div class="card__checkbox">bbb</div>
    <div class="card__info">
        <div class="info-block info-block-1">
            <span class="info-block__description">description</span>
            <div class="info-block__text-wrapper">
                <span class="info-block__text">aaaaaaaaaaaaaaaaaa</span>
                <button class="info-block__copy-button">copy</button>
            </div>
        </div>
        <div class="info-block info-block-2">
            <span class="info-block__description">description</span>
            <div class="info-block__text-wrapper">
                <span class="info-block__text"
                    >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span
                >
            </div>
        </div>
    </div>
    <div class="card__status">status</div>
</div>

БЛОГ НА HUSL

Сокращение текста в блоке, относительно ширины блока

Ответы (1 шт):