Referencia de etiquetas

Etiqueta wbr en HTML: puntos opcionales de salto de línea

La etiqueta  indica un punto donde el navegador puede dividir una palabra o cadena larga si necesita ajustar la línea. Sirve para elegir cortes legibles en un identificador que ocupa demasiado ancho en una tarjeta o pantalla móvil. Si el texto cabe, no provoca un salto ni añade un guion.

Ejemplo mínimo: ofrecer puntos de corte

<p>Identificador: proyecto<wbr>-html<wbr>-principiantes</p>

En una línea amplia se ve proyecto-html-principiantes seguido. Cuando falta espacio, el navegador dispone de oportunidades de salto antes de los dos guiones. Los guiones visibles pertenecen al texto: no los genera .

Para probarlo, coloca el párrafo dentro del <body> del documento completo de abajo y reduce el ancho de la ventana. Mover un  cambia la oportunidad que ofreces. Retirarlos conserva el identificador; como este contiene guiones, el navegador también puede encontrar cortes normales junto a ellos. Su retirada no garantiza que desaparezcan todos los saltos.

Sintaxis y contexto válido

Escribe  entre las partes del texto que quieras poder separar. Es un elemento vacío, sin contenido ni etiqueta de cierre: no escribas . Se admite donde se espera contenido de frase, por ejemplo dentro de un párrafo, un enlace o un ; no directamente entre los elementos <li> de una lista. Estas reglas están en la definición de  del estándar HTML.

Un  no equivale a un espacio escrito en el identificador. Tampoco obliga al navegador a cortar en todos los puntos marcados. El resultado depende del ancho disponible, la fuente y las reglas de ajuste del texto.

Wbr frente a br y al guion opcional

Las tres técnicas resuelven necesidades distintas:

: ofrece un salto posible, sin añadir un signo al final de la línea. Úsalo para puntos elegidos dentro de una cadena.
 : introduce un salto obligatorio, aunque sobre espacio. Conviene cuando la separación forma parte del contenido, como en versos; consulta la guía de  .
: representa el carácter de guion opcional, que puede mostrar un guion al dividir la palabra. Por ejemplo, extraordinario ofrece un punto de división con guion. Es un carácter de texto, no una etiqueta HTML.

La diferencia entre  y  se explica en las notas de MDN sobre los puntos de salto. Para identificadores que deben copiarse literalmente, evita introducir caracteres adicionales sin comprobar el resultado.

Caso práctico: contenedores ancho y estrecho

Guarda este documento como identificadores.html en UTF-8 y ábrelo en un navegador. Incluye todo el CSS necesario y funciona sin JavaScript, archivos externos ni servidor. El identificador usa guiones bajos para que los guiones normales del primer ejemplo no oculten la comparación.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Comparación de cortes de línea</title>
    <style>
      body {
        max-width: 48rem;
        margin: 1rem auto;
        padding: 0 1rem;
        font-family: sans-serif;
        line-height: 1.5;
      }

      h1, h2 { overflow-wrap: anywhere; }

      .caja {
        box-sizing: border-box;
        width: 32ch;
        max-width: 100%;
        padding: 0.5rem;
        border: 1px solid #555;
        font: 1rem/1.5 monospace;
      }

      .estrecha { width: 16ch; }
      .automatico { overflow-wrap: anywhere; }
      code { font: inherit; }

      textarea {
        display: block;
        box-sizing: border-box;
        width: 100%;
        font: 1rem/1.5 monospace;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Un identificador, tres formas de ajustar</h1>
      <p>En cada pareja aparece primero la caja ancha y después la estrecha.</p>

      <h2>Puntos elegidos con wbr</h2>
      <p class="caja"><code>proyecto<wbr>_html<wbr>_principiantes</code></p>
      <p class="caja estrecha"><code>proyecto<wbr>_html<wbr>_principiantes</code></p>

      <h2>Saltos obligatorios con br</h2>
      <p class="caja"><code>proyecto<br>_html<br>_principiantes</code></p>
      <p class="caja estrecha"><code>proyecto<br>_html<br>_principiantes</code></p>

      <h2>Cortes automáticos con CSS</h2>
      <p class="caja automatico"><code>proyecto_html_principiantes</code></p>
      <p class="caja estrecha automatico"><code>proyecto_html_principiantes</code></p>

      <label for="copia">Pega aquí una copia del identificador para compararla:</label>
      <textarea id="copia" rows="3" spellcheck="false"></textarea>
    </main>
  </body>
</html>

En las cajas anchas,  y CSS permiten una sola línea;   conserva tres. En las estrechas,  permite separar los grupos indicados y overflow-wrap: anywhere puede cortar dentro de un grupo para evitar que sobresalga. No tienes que añadir  después de cada letra.

Prueba estos cambios por separado:

Retira los  de la caja estrecha. Con estos estilos, la cadena con guiones bajos puede sobresalir. Muévelos a otros puntos y observa qué partes permanecen juntas.
Sustituye los   por . La caja ancha deja de conservar tres líneas obligatorias.
Quita la clase automatico de la caja estrecha con CSS. Pierde sus cortes adicionales. Reduce la ventana: max-width limita las cajas al espacio disponible.
Selecciona únicamente el identificador de cada versión, cópialo y pégalo en el campo. Compara caracteres y saltos con proyecto_html_principiantes; repite en tu editor de destino. En la prueba local con Chromium 153,  y el ajuste con CSS conservaron esa cadena, mientras que   aportó saltos de línea. La copia como texto o HTML y otras herramientas pueden dar resultados distintos.

Atributos, alternativas CSS y accesibilidad

 no tiene atributos específicos; admite globales como id, class y style. overflow-wrap, word-break y hyphens son propiedades CSS, no atributos de la etiqueta ni propiedades de JavaScript. textContent, en cambio, es una propiedad DOM que un script puede consultar para obtener texto; no constituye una prueba de lo que llegará al portapapeles.

Para cadenas imprevisibles, overflow-wrap: anywhere permite cortes adicionales cuando hacen falta. word-break: break-all permite dividir entre letras en texto latino con más facilidad, incluso cuando mover una palabra entera a la siguiente línea sería posible. hyphens: auto aplica división de palabras según el idioma y los recursos del navegador; declara lang correctamente y no esperes que trate un identificador como una palabra de diccionario.

El ajuste ayuda a leer en móvil, pero no garantiza un anuncio idéntico en todos los lectores de pantalla. Conserva el texto completo y comprueba lectura y copia con las herramientas de tu audiencia. No añadas nombres ARIA ni controles a cada punto de salto. El campo del ejemplo tiene una etiqueta visible y permite revisar la copia también sin scripts.

Si representas una URL o un valor de formulario, coloca los cortes solo en el texto visible. No insertes etiquetas dentro de href, value o una cadena ejecutable. El destino o valor debe conservarse completo. Un  puede agrupar texto para aplicar estilos; <code> identifica fragmentos de código. Ninguno ofrece por sí solo los puntos de salto de .

Preguntas frecuentes y errores

¿Wbr y br son iguales?

No:  ofrece una oportunidad de salto;   lo introduce obligatoriamente. Elige según si necesitas ajustar una cadena o conservar una separación del contenido.

¿Wbr agrega un guion?

No. Un guion visible puede estar escrito en el texto original. Para una división con guion opcional, estudia  y comprueba tanto la visualización como la copia.

¿Por qué una palabra larga no se corta?

Primero comprueba que falta ancho: si cabe, no tiene por qué saltar. Después revisa que una regla como wbr { display: none; } no esté ocultando los puntos que añadiste. Por último, verifica que cada tramo entre oportunidades cabe en el contenedor;  no divide automáticamente el interior de un tramo demasiado largo. Puedes añadir un punto razonable o aplicar overflow-wrap según el caso.

Compatibilidad y fuentes

Consulta realizada el 4 de octubre de 2026: MDN clasifica  como ampliamente disponible en los navegadores actuales. Los ejemplos usan HTML y CSS sin APIs de JavaScript. La compatibilidad del elemento no garantiza resultados idénticos de copia, pronunciación o separación automática de palabras.

El HTML Living Standard, sección de , fija significado, contenido vacío y atributos globales. Las notas y ficha técnica de MDN complementan la explicación; las secciones de CSS Text enlazadas arriba describen las alternativas de ajuste.