min-width
Définit une largeur minimale, en dessous de laquelle l’élément ne se réduit pas.
- Valeur initiale
auto- Héritée
- Non
- Animable
- oui, en tant que longueur ou pourcentage
- S’applique à
- tous les éléments sauf les éléments en ligne non remplacés (par exemple `<span>`), les lignes de tableau et les groupes de lignes
- JavaScript
element.style.minWidth = "200px"
Exemple
#.button {
min-width: 120px;
padding: 8px 16px;
}<div class="stage">
<button class="button">OK</button>
<button class="button">Enregistrer les modifications</button>
</div>Définition et utilisation
#La propriété min-width garantit qu’un élément ne devient pas plus étroit que la valeur indiquée, même si width ou une mise en page flex essaient de le comprimer. En cas de conflit entre les deux, min-width l’emporte.
Elle est utile pour les boutons et les étiquettes qui ne doivent pas devenir trop étroits, ainsi que dans les mises en page flex, où les éléments se réduisent pour tenir sur une ligne.
Sur un élément flex, la largeur minimale par défaut correspond en pratique à la largeur du mot le plus long. Définir min-width: 0 permet à cet élément de se réduire davantage, par exemple pour qu’une troncature de texte avec points de suspension fonctionne.
Syntaxe
#min-width: auto | <longueur> | <pourcentage> | min-content | max-content;Valeurs
#Valeurs en pratique
#auto
width..demo { min-width: auto; }160px
width: 40px..demo { min-width: 160px; }50%
.demo { min-width: 50%; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Si le texte d’un élément flex refuse de se tronquer avec des points de suspension, ajoutez-lui
min-width: 0. - Des boutons partageant la même largeur minimale paraissent plus soignés lorsqu’ils sont groupés.
Entrées associées
#- widthDéfinit la largeur d’un élément.
- max-widthDéfinit une largeur maximale, au-delà de laquelle l’élément ne s’étire pas.
- flex-shrinkDétermine à quel point un élément rétrécit quand la place manque dans le conteneur.
- text-overflowDétermine comment marquer un texte coupé à la fin d’une ligne, par exemple avec des points de suspension.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.