Propriété CSS block-overflow
The block-overflow CSS property is used to truncate the text and specify more content. Read about property values.
La propriété block-overflow contrôle la manière dont le contenu est tronqué lorsqu'il déborde d'un conteneur de bloc, en insérant éventuellement des points de suspension ou une chaîne de caractères personnalisée pour indiquer qu'il reste du contenu.
warning
Si la boîte ne contient aucun bloc de ligne immédiatement précédant une rupture de région, alors la propriété
block-overflowne fonctionne pas. (Une rupture de région se produit lorsque le contenu s'écoule dans une région CSS ou une mise en page multi-colonnes.)
| Valeur initiale | clip |
|---|---|
| S'applique à | Conteneurs de bloc. |
| Héritée | Non. |
| Animable | Non. |
| Version | Module CSS Overflow Level 4 |
| Syntaxe DOM | object.style.blockOverflow = "ellipsis"; |
Syntaxe
Syntaxe de la propriété CSS block-overflow
block-overflow: clip | ellipsis | <string>;Exemple pratique
Exemple de la propriété CSS block-overflow
.module {
block-overflow: ellipsis;
}<div class="module">
<p>This is a long paragraph that will be clipped at the container's edge, with an ellipsis added to indicate more content follows.</p>
</div>Relation avec line-clamp
La propriété CSS line-clamp est un raccourci pour overflow-block et max-lines. Elle implique block-overflow: ellipsis et limite le texte à un nombre spécifique de lignes.
Valeurs
| Valeur | Description |
|---|---|
| clip | Le contenu est tronqué au bord de la boîte. |
| ellipsis | Affiche des points de suspension (...) à la fin de la dernière ligne. Il s'affiche sous forme de caractère Unicode (U+2026) mais pourrait être remplacé par un équivalent basé sur la langue du contenu et le mode d'écriture de l'agent utilisateur utilisé. |
<string> | Affiche la chaîne spécifiée comme points de suspension de débordement de bloc à la fin de la dernière ligne. Le navigateur peut tronquer la chaîne si elle est extrêmement longue. |
.custom-ellipsis {
block-overflow: "...";
}Pratique
Comment la propriété CSS overflow est-elle utilisée ?