mozilla
Vos résultats de recherche

    text-overflow

    Résumé

    La propriété CSS text-overflow détermine comme le dépassement de contenu est signalé aux utilisateurs. Il peut être rogné, afficher des points de suspension ('', U+2026 Horizontal Ellipsis) ou une chaîne définie par l'auteur de la page.

    text-overflow.png

    Le rognage apparaît au bord de la boîte ; pour rogner au dernier caractère entier, il faut utiliser une chaîne vide ('').

    Cette propriété CSS ne force pas un dépassement de contenu ; pour le forcer et utiliser la propriété text-overflow, l'auteur doit appliquer quelques propriétés supplémentaires à l'élément, comme utiliser la valeur hidden pour overflow.

    • Valeur initiale clip
    • S'applique à block container elements
    • Héritée non
    • Pourcentages
    • Média visual
    • Valeur calculée comme spécifié
    • Animable non
    • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

    Syntaxe

    text-overflow: inherit                                 ou
    text-overflow: end-overflow-type                       ou
    text-overflow: left-overflow-type right-overflow-type  /* cette syntaxe est toujours expérimentale et sera peut-être ajoutée à CSS4 */
    

    où :

    inherit
    est un mot-clé indiquant l'utilisation de la valeur que l'élément parent utilise.
    end-overflow-type
    Est une valeur CSS <overflow-type> décrivant le comportement à adopter en fin de ligne. La fin de la ligne est son extrémité droite si le texte est écrit de gauche à droite et son extrémité gauche si le texte est écrit de droite à gauche.
    left-overflow-type
    Est une valeur CSS <overflow-type> décrivant le comportement à la gauche de la ligne. La direction de lecture du texte n'a pas d'influence sur le côté qui est influencé.
    right-overflow-type
    Est une valeur CSS <overflow-type> décrivant le comportement à la droite de la ligne. La direction de lecture du texte n'a pas d'influence sur le côté qui est influencé.

    <overflow-type>

    La type de valeur CSS <overflow-type> décrit comment le dépassement de texte est géré. Les valeurs suivantes sont acceptables :

    clip
    Ce mot-clé indique que tout le texte dépassant de la zone de contenu, le rognage peut donc arriver au milieu d'un caractère. Pour tronquer entre deux caractères, la chaîne vide ('') doit être utilisée. La valeur clip est la valeur par défaut.
    ellipsis
    Ce mot-clé indique l'utilisation de points de suspension ('…', U+2026 Horizontal Ellipsis) pour siganler le rognage du texte. Les points de suspension dans la zone de contenu, raccourcissant un peu plus le texte affichable. S'il n'y a pas assez d'espace pour afficher les points de suspensions, ils sont rognés.
    chaîne
    La <string> doit être utilisée pour signaler le rognage du texte. La chaîne est affichée dans la zone de contenu, raccourcissant un peu plus le texte affichable. S'il n'y a pas assez d'espace pour afficher la chaîne, elle est rognée.

    Exemples

    p {
      white-space: nowrap;
      width: 100%;                   
      overflow: hidden;              /* la valeur "overflow" doit être différente de "visible" */ 
    
      text-overflow:    ellipsis;
    }
    
    Valeur CSS direction: ltr direction: rtl
    Résultat attendu Résultat réel Résultat attendu Résultat réel
    visible overflow 1234567890
    1234567890
    0987654321
    1234567890
    text-overflow: clip t-o_clip.png
    123456
    t-o_clip_rtl.png
    1234567890
    text-overflow: '' 12345
    123456
    54321
    1234567890
    text-overflow: ellipsis 1234…
    1234567890
    …4321
    1234567890
    text-overflow: '.' 1234.
    1234567890
    .4321
    1234567890
    text-overflow: clip clip 123456
    1234567890
    654321
    1234567890
    text-overflow: clip ellipsis 1234…
    1234567890
    6543…
    1234567890
    text-overflow: clip '.' 1234.
    1234567890
    6543.
    1234567890
    text-overflow: ellipsis clip …3456
    1234567890
    …4321
    1234567890
    text-overflow: ellipsis ellipsis …34…
    1234567890
    …43…
    1234567890
    text-overflow: ellipsis '.' …34.
    1234567890
    …43.
    1234567890
    text-overflow: ',' clip ,3456
    1234567890
    ,4321
    1234567890
    text-overflow: ',' ellipsis ,34…
    1234567890
    ,43…
    1234567890
    text-overflow: ',' '.' ,34.
    1234567890
    ,53.
    1234567890

    Spécifications

    Spécification Statut Commentaire
    CSS Basic User Interface Module Level 3
    La définition de 'text-overflow' dans cette spécification.
    Version de travail  

    Une version précédente de cette interface a atteint l'état de Candidate Recommendation. Du fait que certains fonctions considérées sans risque ont dûes être retirée, la spécification a été rétrogradée au niveau Working Draft, expliquant pourquoi les navigateurs ont implémentés cette propriété sans préfixes malgré l'état différent de Candidate Recommendation.

    Compatibilité des navigateurs

    Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Support de base 1.0 (312.3) 7.0 (7.0)(Voir les notes) 6.0 (Voir les notes) 11 (Voir les notes) 1.3 (312.3)
    Syntaxe à deux valeurs Pas de support 9.0 (9.0) Pas de support Pas de support Pas de support
    Chaîne Pas de support 9.0 (9.0) Pas de support Pas de support Pas de support
    Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support de base (Oui) 7.0 (7.0) ? (Oui) (Oui)
    Syntaxe à deux valeurs Pas de support 9.0 (9.0) Pas de support Pas de support Pas de support
    Chaîne Pas de support 9.0 (9.0) Pas de support Pas de support Pas de support

    Notes concernant Gecko

    Depuis Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), le support de text-overflow sur les blocs avec un dépassement de contenu en ligne des deux côtés à l'horizontale était assuré. Auparavent, si une seule valeur était définie (comme text-overflow:ellipsis;), des points de suspension apparaissaient des deux côtés au lieu du seul bord correspondant au sens de lecture.

    Notes concernant Internet Explorer

    Internet Explorer 8 a intégré une version préfixée, -ms-text-overflow, synonyme de text-overflow.

    Notes concernant Opera

    Opera supporte une version préfixée, -o-text-overflow, depuis la version 9.0.

    Voir également

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli, LukyVj, FredB
    Dernière mise à jour par : LukyVj,