Envelopper et tronquer le texte

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

Les utiliser pour empêcher que du texte retourne à la ligne suivante.

Conception et codage

Utilisation de base

Défaut

S'en servir pour contrôler où et comment les mots retournent automatiquement à la ligne suivante à l'intérieur d'une ligne de texte.

Apparence

Défaut :

Lorem ipsum dolor sit amet, consectetur 30 avril.

Avec .nowrap :

Lorem ipsum dolor sit amet, consectetur 30 avril.

Bonne utilisation

Points de conformité :

  • L'utiliser pour empêcher que des éléments de contenu comme le numéro de téléphone, le code postal, une équation mathématique, une date et la ponctuation française (le deux-points, les crochets et les autres éléments qui nécessitent des espaces) retournent automatiquement à la ligne suivante sur plusieurs lignes
  • Rappelez-vous que la page est réactive à la largeur du navigateur
    • Le texte retourne automatiquement à la ligne suivante à des points différents sur des appareils et des espaces de visionnement différents
    • Ajoutez .nowrap pour convenir aux résolutions différentes
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
  • Ne l'utilisez pas pour renvoyer automatiquement des phrases complètes à la ligne suivante
  • Ne l'utilisez pas pour l'information non textuelle
Code
<p>... <span class="nowrap">30 avril</span>.</p>

Utilisation améliorée

Tronqué

Utiliser pour tronquer le texte pour qu'il s'insère dans une colonne de grille sur une seule ligne. Tout texte au-delà de la bordure de la grille sera recadré et remplacé par un trois points. Le texte disparaît seulement visuellement, il peut cependant toujours être lu par les lecteurs d'écran.

Apparence

Défaut :

Lorem ipsum dolor sit amet, consectetur 30 avril.

Avec .wb-elps :

Lorem ipsum dolor sit amet, consectetur 30 avril.

Bonne utilisation

Point de conformité :

  • Utilisez principalement avec des hyperliens pour prévenir un retour automatique à la ligne (si la hauteur est une préoccupation et que .wb-eqht ne peut être appliqué) ou s'il affiche en dehors des colonnes d'une grille (quand .nowrap est appliqué)
Mauvaise utilisation

Points de conformité :

  • Ne pas utiliser ce style pour des phrases, car il peut cacher des informations à un utilisateur visuel
  • Ne pas utiliser à la place de .wb-eqht lorsque vous tentez d'obtenir une hauteur égale sur une rangée de grille
  • N'utilisez pas cet élément d'une façon qui entre en conflit avec le point de conformité précédent
Code
<p class="wb-elps">...</p>
Date de modification :