Etiqueta HTML <wbr>
La etiqueta HTML <wbr> marca una oportunidad de salto de palabra: un punto donde una palabra larga o URL puede ajustarse si es necesario. Aprende su sintaxis y ejemplos.
La etiqueta HTML <wbr> (Word BReak opportunity, oportunidad de salto de palabra) marca un punto dentro del texto donde el navegador puede insertar un salto de línea si la línea de otro modo se desbordaría. No fuerza un salto — solo añade la opción de saltar allí. Si la palabra cabe en la línea, <wbr> no renderiza nada en absoluto.
Esto es diferente de la etiqueta <br>, que siempre fuerza un salto de línea. Con <wbr>, el navegador rompe en ese punto solo cuando necesita ajustar una cadena larga e irrompible, como una URL, una ruta de archivo, o una palabra muy larga.
La etiqueta <wbr> es uno de los elementos HTML5.
¿Por qué usar <wbr>?
Por defecto, los navegadores rompen las líneas en espacios y guiones. Una cadena larga sin espacios — una URL, una ruta de archivo, un hash, o una palabra larga inventada — no tiene un punto de ruptura natural, por lo que el navegador hace una de dos cosas no deseadas:
- empuja la cadena más allá del borde de su contenedor, causando desbordamiento horizontal, o
- ajusta la cadena en un lugar incómodo y difícil de leer.
Colocar <wbr> en puntos sensatos le indica al navegador "aquí hay un lugar seguro para romper esta cadena si te quedas sin espacio." Los saltos solo aparecen cuando son necesarios, por lo que en una pantalla ancha la cadena permanece intacta.
Ajustar una URL larga — el uso más común
Una URL larga sin espacios es el caso clásico para <wbr>. Añade un <wbr> después de las barras o puntos para que el enlace pueda ajustarse ordenadamente dentro de una columna estrecha en lugar de desbordarse:
<p style="width: 220px; border: 1px solid #ccc; padding: 8px;">
Read it here:
https://<wbr>www.w3docs.com<wbr>/learn-html<wbr>/html-wbr-tag
</p>En una pantalla ancha la URL permanece en una sola línea, pero dentro del contenedor de 220px de arriba solo rompe en los puntos <wbr> que tú permitiste.
<wbr> para una palabra larga
<wbr> también ayuda con una sola palabra enormemente larga. Compara un párrafo con y sin oportunidades de ruptura:
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</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>El primer párrafo puede desbordarse de su contenedor; el segundo puede ajustarse limpiamente entre sílabas cuando se acaba el espacio.
<wbr> vs. ­ vs. CSS
<wbr> es una de varias formas de controlar cómo se ajusta el texto. Cada una se comporta de manera diferente, así que elige la herramienta correcta:
| Técnica | Qué hace | ¿Muestra un guion? |
|---|---|---|
<wbr> | Marca una oportunidad de ruptura en el marcado. Rompe solo si es necesario. | No |
­ (guion suave) | Marca una oportunidad de ruptura. Rompe solo si es necesario. | Sí — aparece un guion en el salto |
CSS overflow-wrap: break-word | Permite al navegador romper una palabra larga en cualquier punto para evitar el desbordamiento. | No |
CSS word-break: break-all | Fuerza saltos entre dos caracteres cualesquiera. | No |
Cuándo elegir cuál:
- Usa
<wbr>cuando tú conoces los puntos de ruptura correctos (después de cada/en una URL, entre sílabas) y quieres que no aparezca ningún guion. - Usa
­cuando quieras el mismo control pero con un guion en el salto — ideal para separar palabras reales con guion. - Usa CSS
overflow-wrap/word-breakcuando no puedas (o no quieras) editar cada cadena manualmente y solo necesites detener el desbordamiento en todo el sitio. Estas suelen ser la mejor opción para contenido generado por el usuario donde no controlas el texto.
La etiqueta <wbr> no introduce un guion en el punto de salto de línea. Si quieres que aparezca un guion solo al final de una línea ajustada, usa ­ (la entidad de carácter de guion suave) en su lugar.
Ejemplo con ruta de archivo
Aquí <wbr> permite que una ruta de archivo de Windows rompa después de cada segmento de barra invertida:
<p>You can find the file by going
C:\user\docs\Letter.txt
</p>Sin oportunidades de ruptura, toda la ruta cae a la línea siguiente. Añadir elementos <wbr> permite que se ajuste limpiamente:
<p>You can find the file by going C:<wbr>\user<wbr>\docs<wbr>\Files<wbr>\Letter.txt</p>Sintaxis
La etiqueta <wbr> es un elemento vacío, por lo que no tiene etiqueta de cierre. En XHTML debes cerrarla automáticamente como <wbr/>.
Ejemplo completo de la etiqueta 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>Resultado
Atributos
El elemento <wbr> no tiene atributos específicos del elemento. Solo admite los atributos globales y los atributos de evento.