Balise HTML <wbr>
La balise <wbr> sert à indiquer au navigateur où une rupture de ligne pourrait être insérée dans le texte. Contrairement à la <br>, qui oblige le navigateur à insérer une rupture de ligne, lorsque <wbr> est utilisé, le navigateur analyse d'abord son contenu, puis insère une rupture de ligne si nécessaire (mot ou adresse URL trop long).
Si vous n'utilisez pas la balise <wbr>, les mots longs pourraient soit se couper à un endroit inapproprié (rendant la lecture difficile), soit ne pas se couper du tout, ce qui décalerait la mise en page de la page.
La balise <wbr> fait partie des éléments HTML5.
DANGER
Un trait d'union au niveau de la rupture de ligne n'est pas ajouté par l'élément <wbr>. Si vous souhaitez qu'un trait d'union n'apparaisse qu'en fin de ligne, utilisez &shy; (entité de caractère de trait d'union souple).
Vous n'utiliserez peut-être pas cet élément fréquemment. Mais si vous en avez besoin, <wbr> sera vraiment utile. Regardons l'exemple ci-dessous, où nous avons un chemin de fichier.
Balise HTML <wbr>
<p>You can find the file by going
C:\user\docs\Letter.txt
</p>Comme vous pouvez le voir, il n'y a aucune opportunité de rupture de ligne, et tout le chemin du fichier passe à la ligne suivante. Si vous ajoutez des éléments <wbr>, le chemin du fichier se coupera correctement lors du rendu de ce paragraphe.
Balise HTML <wbr>
<p>You can find the file by going C:<wbr>\user<wbr>\docs<wbr>\Files<wbr>\Letter.txt</p>Syntaxe
La balise <wbr> est vide, ce qui signifie que la balise de fermeture n'est pas requise. Cependant, dans XHTML, la balise (<wbr>) doit être fermée (<wbr/>).
Exemple de la balise HTML <wbr> :
Balise HTML <wbr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>Résultat
Attributs
La balise <wbr> prend en charge les attributs globaux et les attributs d'événement.
Pratique
Quelle est l'utilisation principale de la balise <wbr> en HTML ?