Balisage wbr
La balise wbr indique l'endroit où le navigateur
peut effectuer un saut de ligne si nécessaire
(si le texte ne tient pas dans la largeur de l'élément).
De telles césures sont appelées conditionnelles.
Ne nécessite pas de balise fermante.
Lors de la césure d'un mot via la balise wbr, le symbole
de césure "-" n'est pas ajouté. Si
vous en avez besoin - utilisez le symbole de césure conditionnelle
­ (le point-virgule
à la fin est obligatoire, ce n'est pas une faute de frappe).
La césure conditionnelle ­ indique
au navigateur l'endroit où il peut effectuer une césure
du mot (si nécessaire), en ajoutant
à cet effet le symbole de césure "-".
Les césures conditionnelles ­ ne
fonctionneront pas si la propriété hyphens
est définie sur la valeur none (alors que les césures
wbr fonctionneront).
Exemple . Texte sans césures
Regardons un exemple de texte dans lequel il y a de longs mots qui débordent des limites du bloc. Attribuons au bloc une petite largeur afin qu'un long mot ne puisse pas y tenir :
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Exemple . Balise wbr
Ici, ajoutons la balise wbr aux
endroits où nous recommandons au navigateur d'effectuer
une césure du mot si nécessaire (remarquez
que le navigateur effectuera les césures
non pas partout où nous l'avons indiqué) :
<div id="elem">
this is super<wbr>super<wbr>super<wbr>long text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Exemple . Symbole ­
Essayons de placer le symbole ­
au lieu de la balise wbr. Aux endroits
de césure, des traits d'union seront affichés :
<div id="elem">
this is supersupersuperlong text
</div>
#elem {
width: 200px;
border: 1px solid black;
}
:
Voir aussi
-
la balise
br,
,
qui effectue un saut de ligne -
la propriété
hyphens,
qui définit les vraies césures de mots -
les propriétés
word-breaketoverflow-wrap,
qui permettent de casser les lettres d'un long mot -
la propriété
overflow,
qui rogne les parties débordantes du bloc
