Text-overflow не работает при использовании display: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 влияет на многоточие.
ТИА
Ответы 5
Ваша проблема здесь в отсутствии «гибких детей». Они должны содержать стили для усечения элемента, а не родительского контейнера.
Попробуйте переместить свойства усечения в отдельный класс .flex-child следующим образом:
.flex-child {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Источник и подробное объяснение: https://css-tricks.com/flexbox-truncated-text/
Вы можете сделать что-то вроде этого
.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>.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>В вашей конфигурации у вас есть гибкий элемент анонимного блочного контейнера, который содержит ваш текст (для этого вы можете обратиться к спецификация). Гибкий элемент будет подчиняться ограничению min-width, поэтому он не будет сжиматься, а будет переполняться, и, поскольку это анонимный блок, у вас нет возможности применить к нему min-width.
В дополнение к этому свойства переполнения должны применяться к гибкому элементу, а не к гибкому контейнеру, поскольку он содержит текст, а свойство переполнения не наследуются. Другими словами, при использовании 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>Без дополнительной оболочки мы не можем нацелить наш гибкий элемент, и применение свойств к гибкому контейнеру ничего не даст.
добавить свойство ниже в класс css
white-space: nowrap;
word-break: break-word;