Gérer les éléments qui débordent
Quand le contenu est plus grand que son cadre, il peut dépasser, être masqué ou devenir défilable. Le réglage de débordement choisit ce comportement ; il ne raccourcit pas votre texte.
1. Comprendre ce qui dépasse
Sélectionnez le cadre concerné dans Calques, puis vérifiez ses dimensions dans Taille. Une hauteur trop courte peut cacher un bouton placé après le texte. Une largeur minimale trop grande peut faire dépasser le cadre entier.
Dans une disposition flexible, un enfant autorisé à grandir peut rester plus haut que la hauteur demandée. Vérifiez son comportement de taille avant de conclure que le débordement ne fonctionne pas. La démonstration choisit une taille fixe pour le paragraphe avant de limiter sa hauteur.
Corrigez d’abord une taille involontaire. Masquer le débordement ne résout pas un contenu qui devait rester lisible.
2. Comparer les comportements
Lecture impossible. Réessayez avec les commandes vidéo.
En Expert, ajoutez Débordement dans Taille lorsqu’il est proposé pour l’élément sélectionné. Ouvrez son choix détaillé.
| Comportement | À quoi vous attendre |
|---|---|
| visible (visible) | Le contenu peut apparaître à l’extérieur du cadre |
| hidden (masqué) | Ce qui dépasse est coupé, sans défilement |
| auto (automatique) | Le contenu peut défiler lorsque le cadre est trop petit |
| scroll (défilement) | Le cadre utilise un comportement de défilement |
La vidéo utilise volontairement un paragraphe de hauteur limitée : vous pouvez voir la différence entre le texte coupé et le texte accessible par défilement.
3. Vérifier le défilement réel
- Choisissez auto.
- Placez le pointeur au-dessus du cadre dans l’aperçu.
- Faites défiler son contenu.
- Vérifiez que le dernier paragraphe et le bouton restent accessibles.
Si rien ne défile, le contenu tient peut-être déjà dans le cadre. Sans limite de taille, le cadre peut simplement grandir avec son contenu. Le réglage peut aussi agir sur un seul axe : les variantes préfixées par x- agissent horizontalement et celles préfixées par y- verticalement. Vérifiez l’axe choisi dans le sélecteur.
4. Choisir une solution confortable
Une petite zone défilable peut convenir à une liste secondaire. Pour le texte principal d’une page, laisser le cadre grandir est souvent plus facile à lire sur mobile. Évitez de masquer un prix, une action ou une information importante.
La disponibilité du réglage dépend de l’élément. Si vous avez sélectionné une image et que la commande n’est pas proposée, sélectionnez dans Calques un élément de contenu compatible. La commande peut aussi être absente sur un conteneur de structure.
5. Retirer le réglage et contrôler
Retirez le réglage de débordement pour comparer avec le comportement du modèle. Contrôlez le petit écran et une version avec davantage de texte. Vérifiez aussi le site publié si vous utilisez une zone défilable dans votre page finale.