html - переполнение текста не работает при использовании display: flex

css flexbox (4)

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

В дополнение к этому свойства переполнения должны применяться к элементу flex, а не к контейнеру flex, поскольку этот объект содержит текст, а свойство overflow не наследуется. Другими словами, при использовании flexbox у вас будет два уровня: flex-контейнер и flex-элементы. Вы должны применить все к гибкому предмету.

Предположим, что мы добавили span вокруг нашего текста, у нас будет это:

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  <span>ThisIsASampleText</span>
</div>

Теперь мы можем нацелиться на элемент flex, чтобы добавить min-width:0 и необходимые свойства, чтобы получить ожидаемый результат:

.flex-container {
  display: flex;
  text-align: left;
}

span {
  min-width:0;
  text-overflow: ellipsis;
  overflow: hidden;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  <span>ThisIsASampleText</span>
</div>

Без дополнительной оболочки мы не сможем нацелить наш flex-элемент, и применение свойств к flex-контейнеру ничего не даст.

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  ThisIsASampleText
</div>

Output: ThisIsASamp  
Expected: ThisIsASam...

Когда я удаляю свойство flex, оно работает нормально.

Я хотел бы знать, почему гибкость влияет на многоточие.

ТИА

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

Попробуйте переместить свойства усечения в отдельный .flex-child следующим образом:

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

Источник и подробное объяснение: https://css-tricks.com/flexbox-truncated-text/

добавить ниже свойство в классе CSS

white-space: nowrap;
word-break: break-word;

.flex-container {
  display: flex;
  text-align: left;
}

.text-container {
   min-width: 0;
   text-overflow: ellipsis;
   overflow: hidden;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
    <div class="text-container">ThisIsASampleText</div>
</div>

https://brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow/