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;







ellipsis