Etiqueta HTML <nobr>
La etiqueta <nobr> no es estándar y nunca formó parte de HTML. Aprende el reemplazo CSS moderno, white-space: nowrap, con ejemplos.
La etiqueta <nobr> estaba destinada a evitar que el texto se dividiera en varias líneas — mantenía el contenido en una sola línea. Normalmente, cuando una línea de texto es más larga que su contenedor, el navegador la divide en la línea siguiente. <nobr> suprimía ese salto de línea automático, por lo que aparecía una barra de desplazamiento horizontal si la línea era demasiado larga para caber.
Nunca uses <nobr> en código nuevo. Nunca fue parte de ningún estándar HTML — ni HTML 4, ni HTML5, ni la especificación actual de WHATWG HTML. Siempre ha sido una extensión no estándar de los navegadores. Los navegadores aún pueden renderizarla por compatibilidad con versiones anteriores, pero pueden abandonar el soporte en cualquier momento y no pasará la validación. Controla el ajuste de línea con la propiedad CSS white-space en su lugar.
Esta página muestra la forma correcta y basada en estándares de evitar el ajuste de texto y luego documenta la etiqueta obsoleta <nobr> para que puedas reconocerla y eliminarla del marcado antiguo.
El reemplazo moderno: white-space: nowrap
Para mantener el texto en una sola línea, establece la propiedad CSS white-space en nowrap sobre el elemento. Este es el equivalente directo y estándar de <nobr> y funciona en todos los navegadores modernos.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.no-wrap {
white-space: nowrap;
}
</style>
</head>
<body>
<h1>Example of white-space: nowrap</h1>
<p class="no-wrap">
It is an ordinary and very long text that is inconvenient to read, because it is written on one line and you have to scroll horizontally to read it.
</p>
</body>
</html>Cómo white-space controla el ajuste de línea
La propiedad white-space decide cómo el navegador maneja los espacios en blanco y los saltos de línea dentro de un elemento. Sus valores principales:
normal— el valor por defecto. Las secuencias de espacios en blanco se contraen a un único espacio y las líneas se ajustan según sea necesario para llenar el contenedor.nowrap— contrae los espacios en blanco comonormal, pero el texto nunca se ajusta. La línea continúa hasta que se encuentra un<br>. Este es el reemplazo de<nobr>.pre— los espacios en blanco y los saltos de línea se preservan exactamente tal como están escritos en el código fuente. El texto no se ajusta (similar al elemento<pre>).pre-wrap— preserva los espacios en blanco y los saltos de línea del código fuente, y ajusta el texto cuando desborda el contenedor.pre-line— preserva los saltos de línea del código fuente pero contrae los demás espacios en blanco, y ajusta según sea necesario.
Evitar el desbordamiento horizontal
Una línea que no se ajusta puede sobrepasar el borde de su contenedor. Para mantener la página ordenada, dale al contenedor una barra de desplazamiento con la propiedad overflow en lugar de dejar que la línea se derrame sobre el resto de la página:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.scroll-box {
white-space: nowrap;
overflow: auto; /* scrollbar appears only when needed */
width: 300px;
border: 1px solid #ccc;
padding: 8px;
}
</style>
</head>
<body>
<p class="scroll-box">
This long line stays on a single row, and the box scrolls horizontally instead of overflowing the page.
</p>
</body>
</html>Cuándo mantener el texto en una línea — y cuándo no
white-space: nowrap es la opción correcta cuando el ajuste de línea rompería el significado o el diseño de contenido corto y atómico:
- Celdas de tabla que no deben dividir un valor entre líneas (fechas, precios, números de teléfono).
- Etiquetas de botones e insignias, para que una etiqueta corta permanezca en una sola fila.
- Elementos del menú de navegación, para que cada enlace permanezca íntegro.
- Números de teléfono, códigos o nombres que deseas mantener visualmente juntos.
Es la herramienta incorrecta para texto de cuerpo largo. Forzar los párrafos en una sola línea genera desplazamiento horizontal, lo cual es difícil de leer. Para contenido largo que necesita ajustarse, haz lo contrario — permite el salto de línea:
overflow-wrap: break-wordpermite al navegador romper una palabra larga que de otro modo sería irrompible (como una URL) solo cuando desborde.word-breakcontrola cómo se dividen las palabras, incluida la división entre dos caracteres cualesquiera para CJK o columnas muy estrechas.
Para sugerir un punto de salto opcional dentro de una cadena larga (por ejemplo, una URL) sin forzarlo, usa el elemento HTML <wbr>.
La etiqueta obsoleta <nobr>
La etiqueta <nobr> era un par de elementos: el contenido se ubicaba entre la etiqueta de apertura <nobr> y la de cierre </nobr>. Se muestra aquí solo como referencia — no la escribas en código nuevo.
Un texto ordinario y muy largo en una sola línea — ejemplo obsoleto con <nobr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<!-- Non-standard. Use white-space: nowrap instead. -->
<nobr>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</nobr>
</body>
</html>Resultado
Dado que <nobr> no es estándar, no tiene sentido darle estilo o manipularla mediante atributos globales id/class — reemplaza el elemento con uno estándar (como un <span> o <p>) que lleve white-space: nowrap y aplica tus atributos allí.