Как заставить flex-box работать с вложенным дочерним элементом, которому нужен усеченный текст?

Чтобы flex-потомок имел усеченный текст с многоточием, можно указать родителю min-with:0. В моем проекте дочерний элемент вложен почти в 10 различных гибких контейнеров. Нужно ли давать всем родителям min-width:0 или лучше обойти это?

песочница

HTML

  <div class="flex-parent-parent-parent">
    <div class="flex-parent-parent">
      <div class="flex-parent">
        <div class="flex-child long-and-truncated">
    1. This is a long string that is OK to truncate please and thank you
        </div>
      </div>
    </div>
</div>

CSS

body {
  width:400px;
}

.flex-parent {
  display: flex;
  padding: 10px;
  border: solid;
}

.flex-parent-parent {
  display: flex;
  border: solid;
  padding: 10px;
}

.flex-parent-parent-parent {
  display: flex;
  border: solid;
  padding: 10px;
}

.long-and-truncated {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
0
37
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Есть ли причина, по которой у вас есть текст, завернутый в такое количество div? Потому что ваша проблема сейчас в том, что технически текст не переполняется, а переполняются div-оболочки. Если вы просто завернули flex-child long-and-truncated в flex-parent-parent-parent, переполнение текста работает так, как вы ожидаете.

Это cms, поэтому я не могу пропустить все обертки.

vuvu 06.04.2022 23:00
Ответ принят как подходящий

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

If you're dealing with flex items on multiple levels of the HTML structure, it may be necessary to override the default min-width: auto / min-height: auto on items at higher levels.

Basically, a higher level flex item with min-width: auto can prevent shrinking on items nested below with min-width: 0.

Вам нужно каким-то образом переопределить min-width в каждом гибком контейнере вверх по цепочке. Это не обязательно должно быть 0 просто любое значение, кроме auto. Например:

body {
  width: 400px;
}

.flex-parent,
.flex-parent-parent,
.flex-parent-parent-parent {
  display: flex;
  padding: 10px;
  border: solid;
  min-width: 200px;
}

.flex-parent {
  min-width: 0;
}

.long-and-truncated {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="flex-parent-parent-parent">
  <div class="flex-parent-parent">
    <div class="flex-parent">
      <div class="flex-child long-and-truncated">
    1. This is a long string that is OK to truncate please and thank you
      </div>
    </div>
  </div>
</div>

В моем примере я установил для всех flex-контейнеров одинаковое значение min-width, но это не обязательно. Вы можете настроить каждый из них так, чтобы он был уникальным в соответствии с вашими потребностями в вашем макете.

.flex-parent { min-width: 0; }
.flex-parent-parent { min-width: 100px; }
.flex-parent-parent-parent { min-width: 400px; }

Есть еще один способ добиться такого поведения, но он по-прежнему включает все вложенные flex-контейнеры:

.flex-parent,
.flex-parent-parent,
.flex-parent-parent-parent {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
}

Установив некоторую комбинацию min-width и/или max-width для каждого из ваших вложенных flex-контейнеров, вы сможете обрезать текст.

В своем вопросе я написал: нужно ли давать всем родителям min-width:0 или лучше обойти это? ... Так что нет лучшего решения. Но спасибо за ссылки!

vuvu 06.04.2022 23:39

К сожалению, я не нашел обходного пути, который бы не включал переопределение min-width и/или max-width на всех предках flex.

Besworks 06.04.2022 23:46

Вы можете установить .flex-parent-parent { overflow:hidden; } с помощью .flex-parent { min-width:0; }, но это может иметь другие непреднамеренные побочные эффекты.

Besworks 06.04.2022 23:50

Другие вопросы по теме