Чтобы 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;
}
Есть ли причина, по которой у вас есть текст, завернутый в такое количество div? Потому что ваша проблема сейчас в том, что технически текст не переполняется, а переполняются div-оболочки. Если вы просто завернули flex-child long-and-truncated
в flex-parent-parent-parent
, переполнение текста работает так, как вы ожидаете.
Это связано с автоматический минимальный размер гибких элементов. Существует отличный ответ, объясняющий это поведение, в котором говорится:
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 или лучше обойти это? ... Так что нет лучшего решения. Но спасибо за ссылки!
К сожалению, я не нашел обходного пути, который бы не включал переопределение min-width
и/или max-width
на всех предках flex.
Вы можете установить .flex-parent-parent { overflow:hidden; }
с помощью .flex-parent { min-width:0; }
, но это может иметь другие непреднамеренные побочные эффекты.
Это cms, поэтому я не могу пропустить все обертки.