Texte

Documentation et exemples d'utilitaires de texte courants pour contrôler l'alignement, l'habillage, le poids, etc.

Sur cette page

Alignement du texte

Réalignez facilement le texte sur les composants grâce aux classes d'alignement de texte. Pour l'alignement de début, de fin et de centre, des classes réactives sont disponibles et utilisent les mêmes points d'arrêt de largeur de fenêtre que le système de grille.

Commencer le texte aligné sur toutes les tailles de fenêtre.

Centrer le texte aligné sur toutes les tailles de fenêtre.

Terminer le texte aligné sur toutes les tailles de fenêtre.

Commencez le texte aligné sur les fenêtres de taille SM (petite) ou plus larges.

Commencez le texte aligné sur les fenêtres de taille MD (moyenne) ou plus large.

Commencer le texte aligné sur les fenêtres de taille LG (large) ou plus larges.

Commencez le texte aligné sur les fenêtres de taille XL (extra-large) ou plus larges.

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

Notez que nous ne fournissons pas de classes utilitaires pour le texte justifié. Bien que, d'un point de vue esthétique, un texte justifié puisse sembler plus attrayant, il rend l'espacement des mots plus aléatoire et donc plus difficile à lire.

Habillage et débordement de texte

Enveloppez le texte avec une .text-wrapclasse.

Ce texte doit être renvoyé à la ligne.

<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Empêcher le texte d'être renvoyé à la ligne avec une .text-nowrapclasse.

Ce texte doit déborder du parent.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Coupure de mot

Empêchez les longues chaînes de texte de casser la disposition de vos composants en utilisant .text-breakpour définir word-wrap: break-wordet word-break: break-word. Nous utilisons word-wrapà la place du plus courant overflow-wrappour une prise en charge plus large des navigateurs, et ajoutons le déprécié word-break: break-wordpour éviter les problèmes avec les conteneurs flexibles.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

Notez qu'il n'est pas possible de casser des mots en arabe , qui est la langue RTL la plus utilisée. Par conséquent , il .text-breakest supprimé de notre CSS compilé RTL.

Transformation de texte

Transformez le texte en composants avec des classes de capitalisation de texte.

Texte en minuscule.

Texte en majuscule.

Texte en majuscules.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Notez que .text-capitalizeseule la première lettre de chaque mot change, sans affecter la casse des autres lettres.

Taille de police

Changez rapidement le font-sizetexte. Bien que nos classes d'en-tête (par exemple, .h1– .h6) s'appliquent font-size, font-weight, et line-height, ces utilitaires s'appliquent uniquementfont-size . Le dimensionnement de ces utilitaires correspond aux éléments d'en-tête de HTML, de sorte que plus le nombre augmente, plus leur taille diminue.

texte .fs-1

texte .fs-2

texte .fs-3

texte .fs-4

texte .fs-5

texte .fs-6

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Personnalisez vos font-sizes disponibles en modifiant la $font-sizescarte Sass.

Épaisseur de la police et italique

Changez rapidement le font-weightou font-styledu texte avec ces utilitaires. font-styleles utilitaires sont abrégés en .fst-*et font-weightles utilitaires sont abrégés en .fw-*.

Texte en gras.

Texte de poids plus gras (par rapport à l'élément parent).

Texte de poids normal.

Texte léger.

Texte plus léger (par rapport à l'élément parent).

Texte en italique.

Texte avec un style de police normal

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

Hauteur de la ligne

Modifiez la hauteur de la ligne avec les .lh-*utilitaires.

Ceci est un long paragraphe écrit pour montrer comment la hauteur de ligne d'un élément est affectée par nos utilitaires. Les classes sont appliquées à l'élément lui-même ou parfois à l'élément parent. Ces classes peuvent être personnalisées selon les besoins avec notre API utilitaire.

<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>

Monospace

Remplacez une sélection par notre pile de polices monospace avec .font-monospace.

C'est en monospace

<p class="font-monospace">This is in monospace</p>

Réinitialiser la couleur

Réinitialisez la couleur d'un texte ou d'un lien avec .text-reset, afin qu'il hérite de la couleur de son parent.

Texte masqué avec un lien de réinitialisation .

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Décoration de texte

Décorez le texte des composants avec des classes de décoration de texte.

Ce texte a une ligne en dessous.

Ce texte est traversé par une ligne.

Ce lien a sa décoration de texte supprimée

<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>

Toupet

variables

// stylelint-disable value-keyword-case
$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base:            var(--#{$variable-prefix}font-sans-serif);
$font-family-code:            var(--#{$variable-prefix}font-monospace);

// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root:              null;
$font-size-base:              1rem; // Assumes the browser default, typically `16px`
$font-size-sm:                $font-size-base * .875;
$font-size-lg:                $font-size-base * 1.25;

$font-weight-lighter:         lighter;
$font-weight-light:           300;
$font-weight-normal:          400;
$font-weight-bold:            700;
$font-weight-bolder:          bolder;

$font-weight-base:            $font-weight-normal;

$line-height-base:            1.5;
$line-height-sm:              1.25;
$line-height-lg:              2;

$h1-font-size:                $font-size-base * 2.5;
$h2-font-size:                $font-size-base * 2;
$h3-font-size:                $font-size-base * 1.75;
$h4-font-size:                $font-size-base * 1.5;
$h5-font-size:                $font-size-base * 1.25;
$h6-font-size:                $font-size-base;

Plans

Les utilitaires de taille de police sont générés à partir de cette carte, en combinaison avec notre API d'utilitaires.

$font-sizes: (
  1: $h1-font-size,
  2: $h2-font-size,
  3: $h3-font-size,
  4: $h4-font-size,
  5: $h5-font-size,
  6: $h6-font-size
);

API utilitaires

Les utilitaires de police et de texte sont déclarés dans notre API d'utilitaires au format scss/_utilities.scss. Apprenez à utiliser l'API des utilitaires.

    "font-family": (
      property: font-family,
      class: font,
      values: (monospace: var(--#{$variable-prefix}font-monospace))
    ),
    "font-size": (
      rfs: true,
      property: font-size,
      class: fs,
      values: $font-sizes
    ),
    "font-style": (
      property: font-style,
      class: fst,
      values: italic normal
    ),
    "font-weight": (
      property: font-weight,
      class: fw,
      values: (
        light: $font-weight-light,
        lighter: $font-weight-lighter,
        normal: $font-weight-normal,
        bold: $font-weight-bold,
        bolder: $font-weight-bolder
      )
    ),
    "line-height": (
      property: line-height,
      class: lh,
      values: (
        1: 1,
        sm: $line-height-sm,
        base: $line-height-base,
        lg: $line-height-lg,
      )
    ),
    "text-align": (
      responsive: true,
      property: text-align,
      class: text,
      values: (
        start: left,
        end: right,
        center: center,
      )
    ),
    "text-decoration": (
      property: text-decoration,
      values: none underline line-through
    ),
    "text-transform": (
      property: text-transform,
      class: text,
      values: lowercase uppercase capitalize
    ),
    "white-space": (
      property: white-space,
      class: text,
      values: (
        wrap: normal,
        nowrap: nowrap,
      )
    ),
    "word-wrap": (
      property: word-wrap word-break,
      class: text,
      values: (break: break-word),
      rtl: false
    ),