min-width
Ustala minimalną szerokość, poniżej której element się nie zwęży.
- Wartość domyślna
auto- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- wszystkie elementy poza liniowymi niezastępowanymi (np. `<span>`), wierszami i grupami wierszy tabel
- JavaScript
element.style.minWidth = "200px"
Przykład
#.button {
min-width: 120px;
padding: 8px 16px;
}<div class="stage">
<button class="button">OK</button>
<button class="button">Zapisz zmiany</button>
</div>Definicja i zastosowanie
#Właściwość min-width pilnuje, żeby element nie był węższy niż podana wartość, nawet jeśli width albo układ flex próbują go ścisnąć. Gdy obie wartości się kłócą, wygrywa min-width.
Przydaje się przy przyciskach i etykietach, które nie powinny robić się za wąskie, oraz w układach flex, gdzie elementy kurczą się, żeby zmieścić się w wierszu.
W elementach flex domyślna minimalna szerokość to w praktyce szerokość najdłuższego słowa. Ustawienie min-width: 0 pozwala takiemu elementowi zwęzić się bardziej, na przykład żeby zadziałało obcinanie tekstu wielokropkiem.
Składnia
#min-width: auto | <długość> | <procent> | min-content | max-content;Wartości
#Wartości w praktyce
#auto
width..demo { min-width: auto; }160px
width: 40px..demo { min-width: 160px; }50%
.demo { min-width: 50%; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Gdy tekst w elemencie flex nie chce się obciąć wielokropkiem, dodaj temu elementowi
min-width: 0. - Przyciski o równej minimalnej szerokości wyglądają porządniej w grupie.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.