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

Question

.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, оно работает нормально.

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

TIA

Answer 1

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

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

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

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

Answer 2

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

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

Теперь мы можем нацелить гибкий элемент, чтобы добавить 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>

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

Answer 3

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

Answer 4

Вы можете сделать что-то вроде этого

.flex-container {
  display: flex;
}

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

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

Answer 5

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

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