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

Содержание

Вопрос или проблема
Ответ или решение
HTML-структура
CSS-стили
Пояснения

Вопрос или проблема

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

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

<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">описание</span>
            <div class="info-block__text-wrapper">
                <span class="info-block__text">aaaaaaaaaaaaaaaaaa</span>
                <button class="info-block__copy-button">копировать</button>
            </div>
        </div>
        <div class="info-block info-block-2">
            <span class="info-block__description">описание</span>
            <div class="info-block__text-wrapper">
                <span class="info-block__text">aaaaaaaaaaaaaaaaaa</span>
            </div>
        </div>
    </div>
    <div class="card__status">статус</div>
</div>

.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 много раз, и все безуспешно. Наиболее близкий результат, который я получил, был с блоком простого текста.

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

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

Ответ или решение

Для решения проблемы, связанной с обрезкой текста в блоке информации карточки с фиксированной шириной, важно правильно настроить CSS-стили для обеспечения корректного отображения текста, особенно если в нем имеются элементы с фиксированной шириной. Ниже приведено решение, которое должно помочь вам добиться желаемого результата.

HTML-структура

Ваш исходный код вполне приемлем, но я немного изменю его, чтобы он соответствовал требованиям. В частности, обратите внимание на class атрибуты и структуру блоков.

<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">aaaaaaaaaaaaaaaaaaaaaaaa</span>
            </div>
        </div>
    </div>
    <div class="card__status">status</div>
</div>

CSS-стили

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

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

.card__checkbox, .card__status {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65px;
    border-radius: 5px;
    background-color: lightblue; /* измените цвет по желанию */
}

.card__status {
    background-color: lightgreen;
}

.card__info {
    display: flex;
    gap: 10px;
    flex-grow: 1; /* Позволяет этому блоку занимать оставшееся пространство */
}

.info-block {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Позволяет блокам занимать равное количество пространства */
    min-width: 0; /* Важно для того, чтобы обрезка работала */
}

.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; /* Позволяет тексту занимать всё доступное пространство */
}

Пояснения

flex-grow: 1 и min-width: 0: Эти свойства используют расширение блока в флекс-контейнере, чтобы управлять распределением пространства. Свойство min-width: 0 позволяет блоку уменьшаться до нуля, что критично для корректной работы обрезки текста.
overflow: hidden: Важно, чтобы блок, содержащий текст, имел это свойство, иначе текст выйдет за пределы родительского элемента.
text-overflow: ellipsis: Это свойство позволяет добавить многоточие к тексту, который не помещается в блок.

Следуя приведённым рекомендациям, вы должны получить карточку, в которой текст корректно обрезается с помощью многоточия, даже если она содержит другие элементы. Если у вас возникнут дополнительные вопросы или потребуется больше помощи, не стесняйтесь обращаться!