Les textes

Alignement du texte

Réalignez facilement le texte sur les composants avec des classes d'alignement de texte.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore earum ducimus odio? Obcaecati nostrum sit quis, molestias consequatur omnis iure numquam sequi illum tempora possimus provident pariatur. Consequatur, aliquam reprehenderit!Officiis itaque nostrum aliquam minima corrupti eos ab quibusdam fugit, eaque assumenda autem quod, eveniet repellendus earum provident temporibus accusamus cum.

Code :

<div class="jdb-justify">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore earum ducimus odio?
  Obcaecati nostrum sit quis, molestias consequatur omnis iure numquam sequi illum tempora possimus
  provident pariatur. Consequatur, aliquam reprehenderit!Officiis itaque nostrum aliquam minima
  corrupti eos ab quibusdam fugit, eaque assumenda autem quod, eveniet repellendus earum provident
  temporibus accusamus cum.</p>
</div>

Texte aligné à gauche.

Texte aligné au centre.

Texte aligné à droite.

Code :

<p class="jdb-left-align">Texte aligné à gauche.</p>
<p class="jdb-center">Texte aligné au centre.</p>
<p class="jdb-right-align">Texte aligné à droite.</p>

Habillage et débordement de texte

Empêchez la coupure de texte avec une classe .jdb-nowrap. Il y a aussi la classe .jdb-wrap pour éviter les débordements.

Ce texte doit déborder son parent.

Code :

<div class="jdb-nowrap jdb-gray" style="width:8rem">
  Ce texte doit déborder son parent.
</div>

Pour un contenu plus long, vous pouvez ajouter une classe .jdb-ellips pour tronquer le texte avec des points de suspension.

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Code :

<!-- Block level -->
<div class="jdb-row">
  <div class="jdb-col s2 m2 l2 jdb-ellips">Lorem ipsum dolor, sit amet consectetur adipisicing elit.</div>
</div>

<!-- Inline level -->
<span class="jdb-show-inline-block jdb-ellips" style="max-width:150px">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</span>

Avec les classes jdb-clamp et lx (où x est un chiffre entre 1 et 6 compris représentant le nombre de lignes à afficher)... Regardez la fin du bloque de texte suivant et vous verrez les points de suspension à la fin de la troisième ligne. Redimensionnez la page pour voir le changement.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione facilis dolores esse consequuntur quo ipsa inventore eos consectetur expedita, qui quia ea maiores ut quisquam quam quidem itaque vero minima.A, nisi eos. Sequi eligendi aliquid quam, dolorum adipisci quaerat voluptatem laborum magnam possimus tenetur officiis! Fugit, quod quibusdam? Repellat dolores doloribus vitae ut at, illo esse veritatis id? Sapiente.

Code :

<p class="jdb-clamp l3">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit.Ratione facilis dolores esse consequuntur
  quo ipsa inventore eos consectetur expedita, qui quia ea maiores ut quisquam quam quidem itaque
  vero minima.A, nisi eos. Sequi eligendi aliquid quam, dolorum adipisci quaerat voluptatem laborum
  magnam possimus tenetur officiis! Fugit, quod quibusdam? Repellat dolores doloribus vitae ut at,
  illo esse veritatis id? Sapiente.
</p>

Transformation de texte

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

Texte en minuscules.

Texte en majuscule.

Code :

<p class="jdb-lowercase">Texte en minuscules.</p>
<p class="jdb-uppercase">Texte en majuscule.</p>

Équilibre du texte

Équilibrez le texte sur plusieurs lignes avec la classe jdb-text-balance ou jdb-text-pretty.

Texte sans la classe jdb-text-pretty :

Texte avec la classe jdb-text-pretty :

Texte sans la classe jdb-text-balance :

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Texte avec la classe jdb-text-balance :

Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Autres décorations de texte

Texte souligné.

Texte barré.

Texte en italique.

Texte en gras.

Texte en monospace.

Texte avec serif.

Texte sans serif.

Lettres espacées.

Lettres moins espacées.

Lien avec décoration

Lien sans décoration

window.location (code)

Essayez de me sélectionner

Code :

<p class="jdb-underline">Texte souligné.</p>
<p class="jdb-strike">Texte barré.</p>
<p class="jdb-italic">Texte en italique.</p>
<p class="jdb-bold">Texte en gras.</p>
<p class="jdb-monospace">Texte en monospace.</p>
<p class="jdb-serif">Texte avec serif.</p>
<p class="jdb-sans-serif">Texte sans serif.</p>
<p class="jdb-wide">Lettres espacées.</p>
<p class="jdb-tight">Lettres moins espacées.</p>
<p><a href="#">Lien avec décoration</a></p>
<p><a class="jdb-text-decoration-0" href="#">Lien sans décoration</a></p>
<p><code class="jdb-codespan">window.location</code> (code)</p>
<p class="jdb-unselectable">Essayez de me sélectionner</p>

Les tailles de texte

Certaines classes ont un ou plusieurs synonymes plus raccourcis, particulièrement pour les noms de tailles :

medium → md
large → lg
xlarge → xl
xxlarge → xxl
xxxlarge → xxxl

Sequi eligendi aliquid quam, dolorum adipisci

Code :

<p class="jdb-tiny">Sequi eligendi aliquid quam, dolorum adipisci</p>
<p class="jdb-small">Sequi eligendi aliquid quam, dolorum adipisci</p>
<p class="jdb-large">Sequi eligendi aliquid quam, dolorum adipisci</p>
<p class="jdb-xlarge">Sequi eligendi aliquid quam, dolorum adipisci</p>
<p class="jdb-xxlarge">Sequi eligendi aliquid quam, dolorum adipisci</p>
<p class="jdb-xxxlarge">Sequi eligendi aliquid quam, dolorum adipisci</p>
<p class="jdb-jumbo">Sequi eligendi aliquid quam, dolorum adipisci</p>

Les ombres de texte

Les classes jdb-text-shadow et jdb-text-shadow-multiple-light peuvent être utilisées par les éléments qui ont un arrière-plan claire. La classe jdb-text-shadow-multiple-dark est plus visible avec un arrière-plan sombre comme démontré dans l'exemple ci-dessous :

Eligendi, officia non!

Code :

<div class="jdb-text-shadow jdb-blue">Eligendi, officia non!</div>
<div class="jdb-text-shadow-multiple">Eligendi, officia non!</div>
<div class="jdb-text-shadow-multiple-light">Eligendi, officia non!</div>
<div class="jdb-text-shadow-multiple-dark jdb-teal">Eligendi, officia non!</div>

L'ombre du texte ne fonctionne pas dans IE 9 et les versions antérieures.

Pour en savoir plus sur les couleurs de texte JdB.CSS, veuillez consulter le chapitre sur les couleurs.