La Etiqueta WBR

Indica un punto opcional de ruptura de línea dentro de una palabra o cadena de texto. Su objetivo es sugerir al navegador dónde puede dividir una palabra larga si el espacio disponible no es suficiente, evitando que el texto desborde su contenedor.

La etiqueta <wbr> (Word Break Opportunity) indica un punto opcional de ruptura de línea dentro de una palabra o cadena de texto. Su objetivo es sugerir al navegador dónde puede dividir una palabra larga si el espacio disponible no es suficiente, evitando que el texto desborde su contenedor. Es especialmente útil para URLs largas, códigos, o términos compuestos.

Características clave:

  • No fuerza un salto de línea: Solo ofrece una sugerencia al navegador.

  • No añade guiones: A diferencia de &shy; (soft hyphen), no inserta caracteres visibles.

  • Útil en contenido responsivo: Mejora la legibilidad en dispositivos móviles.

Sintaxis básica

La etiqueta <wbr> es autocerrada y no requiere atributos:

<p>https://www.ejemplo<wbr>.com/ruta<wbr>/muy<wbr>larga</p>

Ejemplos prácticos

Dividir una URL larga

<p>
  Visita: https://www.mi-sitio<wbr>.com/blog/post<wbr>-sobre-html<wbr>-y-css
</p>

Mejorar la legibilidad de códigos

<code>nombreDeVariable<wbr>MuyLarga</code>

Palabras compuestas en un párrafo

<p>Este es un término<wbr>Increíblemente<wbr>Largo.</p>

Estilización (opcional)

Aunque <wbr> es invisible, puedes usar CSS para depurar su ubicación durante el desarrollo:

wbr {
  background-color: rgba(255, 0, 0, 0.3); /* Resalta el punto de ruptura */
  padding: 2px;
}

Comparación con otras soluciones

Elemento/Carácter Descripción
<wbr> Sugiere un punto de ruptura sin añadir guiones.
&shy; Inserta un guion opcional (-) si el texto se divide.
<br> Fuerza un salto de línea (no recomendado para palabras largas).

Errores comunes

Usar <wbr> en lugar de &shy;:

Si necesitas guiones al dividir una palabra, usa &shy;:

<p>electro&shy;encefalografista</p>

Abusar de <wbr>:

No es necesario marcar todas las sílabas. Solo donde el corte sea lógico.

Confundir <wbr> con <br>:

<br> fuerza un salto de línea, mientras que <wbr> es una sugerencia condicional.

Mejores prácticas

Usa <wbr> en URLs o códigos:

Es ideal para dividir rutas o identificadores largos:

<p>https://api.ejemplo<wbr>.com/v1<wbr>/usuarios<wbr>/lista</p>

Combínalo con CSS para manejo de overflow:

Asegúrate de que el contenedor tenga overflow-wrap: break-word:

.contenedor {
  overflow-wrap: break-word;
}

Prueba en diferentes tamaños de pantalla:

Verifica que los saltos de línea sean lógicos y mejoren la legibilidad.

Compatibilidad

Navegadores modernos:

Todos los navegadores (Chrome, Firefox, Safari, Edge) soportan <wbr>.

Navegadores antiguos:

En IE11 o inferior, usa &#x200B; (carácter de espacio de ancho cero) como alternativa:

<p>https://www.ejemplo&#x200B;.com/ruta&#x200B;/larga</p>

Ejemplo avanzado: Lista de nombres largos

<ul>
  <li>Maria<wbr>Fernanda<wbr>González</li>
  <li>José<wbr>Luis<wbr>Martínez<wbr>Pérez</li>
</ul>

Resultado:
Los nombres se dividen en líneas si el espacio es insuficiente:

MariaFernanda
González

Conclusión

La etiqueta <wbr> es una herramienta útil para:

  • Controlar el flujo de texto en palabras largas o URLs.

  • Mejorar la experiencia móvil evitando desbordamientos.

  • Mantener la legibilidad sin alterar el contenido visualmente.

Ejemplo final:

<p>
  Descarga el archivo desde: 
  https://www.mi-sitio<wbr>.com/descargas<wbr>/documento<wbr>-muy-largo.pdf
</p>

¡Usa <wbr> para crear diseños más limpios y responsivos!