<wbr>El elemento <wbr> (Word Break Opportunity) es un elemento vacío en HTML5 que proporciona una oportunidad de punto de ruptura dentro de una palabra larga para mejorar la maquetación y la estética del texto en entornos de renderizado de texto, como navegadores web. Este elemento no tiene un contenido visible, es decir, es un "autocontenido" sin etiqueta de cierre ni contenido intermedio.
<wbr>El elemento <wbr> no tiene atributos específicos propios. Sin embargo, puede utilizar los atributos globales que son aplicables a la mayoría de los elementos HTML. Aquí están algunos de los atributos globales más comunes:
class: Asigna una o más clases CSS al elemento, que se pueden utilizar para aplicar estilos específicos desde una hoja de estilos.id: Define un identificador único para el elemento. Es útil para el estilo con CSS y la manipulación con JavaScript.style: Estilo en línea para el elemento.title: Proporciona información adicional que generalmente se muestra como un tooltip cuando el usuario pasa el cursor sobre el elemento.lang: Especifica el idioma del contenido del elemento.dir: Define la orientación del texto (ltr: izquierda a derecha, rtl: derecha a izquierda).hidden: Indica que el elemento no es relevante y que no debería mostrarse.tabindex: Especifica el orden de tabulación del elemento.<wbr> en HTML5 con ejemplosEl elemento <wbr> se utiliza para sugerir puntos de interrupción adecuados en palabras largas o URLs que podrían causar problemas de maquetación o desbordamiento en contenedores pequeños. Se utiliza comúnmente dentro de palabras largas o URLs donde los navegadores pueden decidir dividir la palabra en múltiples líneas sin romperla en una ubicación inviable.
Si tienes una palabra larga que puede causar desplazamiento horizontal o desbordamiento de contenido, puedes usar <wbr> para especificar posibles puntos de ruptura.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de wbr</title>
<style>
.container {
width: 200px;
border: 1px solid black;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
una-palabra-muy-muy-larga-que-<wbr>podría-no-ajustar-correctamente-en-<wbr>contenedores-pequeños
</div>
</body>
</html>Las URLs largas a menudo se desbordan en contenedores pequeños. Colocar <wbr> en la URL puede permitir a los navegadores insertarla en la línea correcta sin desbordarse.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de wbr con URL</title>
<style>
.container {
width: 300px;
border: 1px solid black;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
Visita nuestro sitio web en: https://www.ejemplo-<wbr>de-url-muy-larga.com/path/to/resource/<wbr>that/does/not/fit/in/small/boxes
</div>
</body>
</html>En ambos ejemplos, la utilización del <wbr> facilita que el navegador inserte saltos de línea en ubicaciones recomendadas, mejorando así la legibilidad y la maquetación del contenido.