Tag HTML <nobr>
A tag <nobr> não é padrão e nunca fez parte do HTML. Aprenda o substituto moderno em CSS, white-space: nowrap, com exemplos.
A tag <nobr> foi criada para impedir que o texto quebrasse em múltiplas linhas — ela mantinha o conteúdo em uma única linha. Normalmente, quando uma linha de texto é mais longa do que seu contêiner, o navegador a divide para a próxima linha. O <nobr> suprimia essa quebra automática de linha, fazendo aparecer uma barra de rolagem horizontal quando a linha era longa demais para caber.
Nunca use <nobr> em código novo. Ela nunca fez parte de nenhum padrão HTML — nem HTML 4, nem HTML5, nem a especificação HTML atual do WHATWG. Sempre foi uma extensão de navegador não padrão. Os navegadores ainda podem renderizá-la por compatibilidade com versões anteriores, mas podem remover o suporte a qualquer momento, e ela não será validada. Controle a quebra de linha com a propriedade CSS white-space em vez disso.
Esta página mostra a maneira correta e baseada em padrões de evitar a quebra de texto, e depois documenta a tag obsoleta <nobr> para que você possa reconhecê-la e removê-la de marcações antigas.
O substituto moderno: white-space: nowrap
Para manter o texto em uma única linha, defina a propriedade CSS white-space como nowrap no elemento. Este é o equivalente direto e padronizado do <nobr> e funciona em todos os 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>Como white-space controla a quebra de linha
A propriedade white-space decide como o navegador lida com espaços em branco e quebras de linha dentro de um elemento. Seus principais valores:
normal— o padrão. Sequências de espaços em branco se colapsam em um único espaço, e as linhas quebram conforme necessário para preencher o contêiner.nowrap— colapsa espaços em branco comonormal, mas o texto nunca quebra. A linha continua até que um<br>seja encontrado. Este é o substituto do<nobr>.pre— os espaços em branco e as quebras de linha são preservados exatamente como escritos na fonte. O texto não quebra (semelhante ao elemento<pre>).pre-wrap— preserva os espaços em branco e as quebras de linha da fonte, e quebra o texto quando ele ultrapassa o contêiner.pre-line— preserva as quebras de linha da fonte, mas colapsa outros espaços em branco, e quebra conforme necessário.
Evitando o estouro horizontal
Uma linha sem quebra pode ultrapassar a borda do seu contêiner. Para manter a página organizada, forneça ao contêiner uma barra de rolagem com a propriedade overflow em vez de deixar a linha transbordar para o restante da 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>Quando manter o texto em uma linha — e quando não manter
white-space: nowrap é a escolha certa quando a quebra quebraria o significado ou o layout de conteúdos curtos e atômicos:
- Células de tabela que não devem dividir um valor em linhas (datas, preços, números de telefone).
- Rótulos de botões e emblemas, para que um rótulo curto permaneça em uma única linha.
- Itens de menu de navegação, para que cada link permaneça intacto.
- Números de telefone, códigos ou nomes que você deseja manter visualmente juntos.
É a ferramenta errada para textos longos no corpo. Forçar parágrafos em uma única linha cria rolagem horizontal, que é difícil de ler. Para conteúdo longo que precisa caber, faça o oposto — permita a quebra:
overflow-wrap: break-wordpermite que o navegador quebre uma palavra longa que normalmente não quebraria (como uma URL) somente quando ela ultrapassaria o contêiner.word-breakcontrola como as palavras quebram, incluindo quebras entre quaisquer dois caracteres para CJK ou colunas muito estreitas.
Para sugerir um ponto de quebra opcional dentro de uma string longa (por exemplo, uma URL) sem forçá-lo, use o elemento HTML <wbr>.
A tag obsoleta <nobr>
A tag <nobr> era um par de elementos: o conteúdo ficava entre as tags de abertura <nobr> e fechamento </nobr>. Ela é mostrada aqui apenas como referência — não a escreva em código novo.
Um texto comum e muito longo em uma linha — exemplo obsoleto de <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
Como o <nobr> não é padrão, não faz sentido estilizá-lo ou acessá-lo via script por meio dos atributos globais id/class — substitua o elemento por um padrão (como um <span> ou <p>) com white-space: nowrap, e aplique seus atributos ali.