This page is being translated; the original is shown (Русский ).
Минимальная ширина
Классы минимальной ширины задают свойство min-width: элемент может быть
шире, но не уже заданного значения. Чаще всего нужен min-w-0: он позволяет
флекс-элементу сжиматься, чтобы длинный текст сокращался многоточием.
Пример
Сокращение текста во флекс-ряду
Флекс-элемент по умолчанию не становится уже своего содержимого: длинное имя
файла не сокращается и выталкивает метку за край. С min-w-0 элемент
сжимается, и текст сокращается многоточием.
flex-1
otchet-o-rabote-za-tretiy-kvartal-s-prilozheniyami-i-tablitsami.pdf
PDF
flex-1 min-w-0
otchet-o-rabote-za-tretiy-kvartal-s-prilozheniyami-i-tablitsami.pdf
PDF
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-4 color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >flex-1</code >
<div class ="flex items-center gap-2 w-full max-w-g0 overflow-hidden p-1 border border-dashed border-outline radius-ui" >
<div class ="w-c0 h-c0 bg-tertiary-container border border-tertiary radius-ui" ></div >
<div class ="flex-1" >
<p class ="truncate m-0" >otchet-o-rabote-za-tretiy-kvartal-s-prilozheniyami-i-tablitsami.pdf</p >
</div >
<code class ="p-x-2 bg-secondary-container color-on-secondary-container radius-ui" >PDF</code >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >flex-1 min-w-0</code >
<div class ="flex items-center gap-2 w-full max-w-g0 overflow-hidden p-1 border border-dashed border-outline radius-ui" >
<div class ="w-c0 h-c0 bg-tertiary-container border border-tertiary radius-ui" ></div >
<div class ="flex-1 min-w-0" >
<p class ="truncate m-0" >otchet-o-rabote-za-tretiy-kvartal-s-prilozheniyami-i-tablitsami.pdf</p >
</div >
<code class ="p-x-2 bg-secondary-container color-on-secondary-container radius-ui" >PDF</code >
</div >
</div >
</div >
Ширина содержимого и родителя
Пунктирная рамка — родитель. У всех образцов ширина w-0, и минимум задаёт
их ширину: min-w-min — по самому длинному слову, min-w-max — по всей
строке, даже если она шире родителя, min-w-fit — по строке, но не шире
родителя, min-w-full — по ширине родителя.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-2 gap-4 color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >w-0 min-w-min</code >
<div class ="w-f6 p-1 border border-dashed border-outline radius-ui" >
<div class ="w-0 min-w-min p-1 bg-primary-container border border-primary radius-ui color-on-primary-container" >Сохранить изменения и закрыть окно</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >w-0 min-w-max</code >
<div class ="w-f6 p-1 border border-dashed border-outline radius-ui" >
<div class ="w-0 min-w-max p-1 bg-primary-container border border-primary radius-ui color-on-primary-container" >Сохранить изменения и закрыть окно</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >w-0 min-w-fit</code >
<div class ="w-f6 p-1 border border-dashed border-outline radius-ui" >
<div class ="w-0 min-w-fit p-1 bg-primary-container border border-primary radius-ui color-on-primary-container" >Сохранить изменения и закрыть окно</div >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >w-0 min-w-full</code >
<div class ="w-f6 p-1 border border-dashed border-outline radius-ui" >
<div class ="w-0 min-w-full p-1 bg-primary-container border border-primary radius-ui color-on-primary-container" >Сохранить изменения и закрыть окно</div >
</div >
</div >
</div >
Классы
Класс
CSS
Значения
min-w-minmin-width: -webkit-min-content; min-width: -moz-min-content; min-width: min-content—
min-w-maxmin-width: -webkit-max-content; min-width: -moz-max-content; min-width: max-content—
min-w-fitmin-width: -webkit-fit-content; min-width: -moz-fit-content; min-width: fit-content—
min-w-fullmin-width: 100%—
min-w-0min-width: 0—
Условия (что это ): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:min-w-min.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Как выбрать значение
Флекс- или грид-элемент с текстом, который должен сокращаться или
переноситься, — min-w-0.
Кнопка или метка, текст которой не должен переноситься, — min-w-max.
Элемент не уже родителя, например таблица в прокручиваемой обёртке, —
min-w-full.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex items-center gap-2" >
<img class ="w-c0 h-c0" src ="file.svg" alt ="" >
<div class ="flex-1 min-w-0" >
<p class ="truncate" >Очень длинное имя файла.pdf</p >
</div >
<span >PDF</span >
</div >
<div class ="overflow-x-auto" >
<table class ="min-w-full" >…</table >
</div >
Минимум по ширине экрана
С префиксом ширины класс действует от указанной ширины и шире.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="min-w-0 md:min-w-max" >…</div >
Ограничения
Шагов шкалы размеров у семейства нет: точную ширину задают классы
ширины .
Минимальная ширина сильнее ширины и максимальной ширины.
min-w-max и min-w-full могут вывести элемент за родителя; на узком
экране это даёт горизонтальную прокрутку.У семейства нет префиксов состояния.
См. также
Предыдущая Минимальная высота Следующая Ширина
