Как заставить 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;
}
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
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

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