Text-box-trim - Propriété CSS

text-box-trim

Résumé des caractéristiques de la propriété text-box-trim

Description rapide
Spécifie comment la réduction des dimensions d'une boîte de texte doit se faire pour se conformer à text-box-edge (langages CJK).
Statut
Problèmes de compatibilité ⚠
S'applique à
Conteneurs du type bloc et inline box.
Utilisable sur
HTML
Valeurs prédéfinies
none | trim-start | trim-end | trim-both
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété text-box-trim passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Mise en page en ligne
Références (W3C)
Statut du document: WD (document de travail)

Schéma de la syntaxe de text-box-trim.

text-box-trim - Syntax DiagramSyntax diagram of the text-box-trim CSS property. none none trim-start trim-start trim-end trim-end trim-both trim-bothtext-box-trim:;text-box-trim:;
Schéma syntaxique de la propriété text-box-trim.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété text-box-trim.

⚠
Cette page est en préparation, dans l'attente d'une stabilisation de la norme.

text-box-trim supprime les espacements avant et/ou après les lignes de texte. En tant normal ces espacements sont utiles pour éviter que les lignes ne se touchent mais il y a des cas où ils sont plutôt gênants comme dans les alignements verticaux.

Exemple pour text-box-trim

Titre.

Dans cet exemple, le haut de l'image n'est pas tout à fait aligné avec le haut du titre. On pourrait corriger cela en ajoutant une marge négative au titre, mais la valeur de cette marge dépendrait de la police de caractères utilisée. La solution du binôme text-box-trim / text-box-edge est plus élégante.


Voyez la page sur text-box-edge pour des informations complémentaires, et la page sur text-box pour des exemples d'utilisation.

Valeurs pour text-box-trim.

Dans les exemples qui suivent, la taille des caractères à été fixée à 2rem et la propriété text-box-edge a été fixée à cap alphabetic afin que l'effet de text-box-trim soit bien visible avant et après la ligne de texte.

  • text-box-trim: none;

    Ici, aucun des espacements n'est supprimé, ni avant, ni après la ligne. Quand il s'agit de texte normal, c'est la meilleure solution.

    Ligne de texte
  • text-box-trim: trim-start;

    Les espacements avant la ligne sont supprimés. Utilisé par exemple pour aligner le haut d'un titre avec le haut d'une image par exemple.

    Ligne de texte
  • text-box-trim: trim-end;

    Ici ce sont les espacements après la ligne qui sont supprimés. C'est le symétrique du précédent, utilisé pour les alignements par le bas.

    Ligne de texte
  • text-box-trim: trim-both;

    Les espacements avant et les espacements après la ligne sont supprimés. Cette option est utilisée par exemple quand il est question d'aligner verticalement deux textes dans des polices différentes.

    Ligne de texte
  • text-box-trim: initial; (none) text-box-trim: inherit; text-box-trim: revert; text-box-trim: revertLayer; text-box-trim: unset;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple interactif avec la propriété text-box-trim.

text-box-trim et text-box-edge sont tellement liées qu'il est préférable de proposer une simulateur avec ces deux propriétés. Les effets seront le plus visibles avec :

text-box-edge:ex alphabetic; text-box-trim:trim-both;
text-box-edge :
text-box-trim :
Première ligne
Autre ligne de texte

Compatibilité des navigateurs avec text-box-trim.

La propriété text-box-trim est encore très mal traitée par les navigateurs (2025).

Colonne 1
Support par les navigateurs de la propriété text-box-trim pour supprimer les espacements avant et/ou après les lignes de texte.
1
Propriété
text-box-trim
Estimation de la prise en charge globale.
62%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Chrome

Safari

Firefox

Safari sur IOS

Edge

Androïd Brower

Firefox pour Androïd

Chrome pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse

Histoire de la propriété text-box-trim.

Voir aussi, concernant les dispositions en ligne.

Le module de spécification dénommé "Module CSS - Mise en page en ligne", ou CSS Inline Layout Module en anglais, définit ce qui est relatif aux alignements verticaux et à la disposition en ligne des éléments. La propriété text-box-trim et les propriétés suivantes sont décrites dans ce module :

Propriétés :

alignment-baseline
Définit comment un élément est aligné, dans le sens vertical, par rapport à son parent.
⚠
baseline-shift
baseline-source
Définit si l'alignment vertical d'un élément doit se faire par rapport à sa premère ou sa dernière ligne de texte.
dominant-baseline
Définit la ligne de base utilisée pour les alignements verticaux de textes.
⚠
initial-letter
Définit les paramètres des lettrines.
⚠
initial-letter-wrap
Définit comment le texte doit contourner les lettrines.
line-height
Définit la hauteur des lignes de texte.
⚠
text-box
Permet l'effacement des espacements situés avant et/ou après les lignes de texte.
⚠
text-box-edge
Définit le métrique des textes CJK.
vertical-align
Alignement vertical.