Tag HTML <nobr>
Il tag <nobr> non è standard e non ha mai fatto parte di HTML. Scopri il sostituto CSS moderno, white-space: nowrap, con esempi.
Il tag <nobr> era pensato per impedire al testo di andare a capo su più righe — manteneva il contenuto su una singola riga. Normalmente, quando una riga di testo è più lunga del suo contenitore, il browser la sposta alla riga successiva. <nobr> sopprimeva quell'interruzione automatica di riga, quindi appariva una barra di scorrimento orizzontale se la riga era troppo lunga per stare nel contenitore.
Non utilizzare mai <nobr> nel nuovo codice. Non ha fatto mai parte di alcuno standard HTML — né HTML 4, né HTML5, né l'attuale specifica WHATWG HTML. È sempre stata un'estensione browser non standard. I browser potrebbero ancora renderizzarla per compatibilità con il passato, ma possono smettere di supportarla in qualsiasi momento, e non sarà valida. Controlla l'a capo del testo con la proprietà CSS white-space.
Questa pagina mostra il modo corretto e basato sugli standard per impedire al testo di andare a capo, quindi documenta il tag obsoleto <nobr> così che tu possa riconoscerlo e rimuoverlo dal vecchio markup.
Il sostituto moderno: white-space: nowrap
Per mantenere il testo su una singola riga, imposta la proprietà CSS white-space su nowrap sull'elemento. Questo è l'equivalente diretto e standard di <nobr> e funziona in ogni browser moderno.
<!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>Come white-space controlla l'a capo
La proprietà white-space determina come il browser gestisce gli spazi bianchi e le interruzioni di riga all'interno di un elemento. I suoi valori principali:
normal— il valore predefinito. Le sequenze di spazi bianchi vengono ridotte a uno spazio singolo, e le righe vanno a capo quando necessario per riempire il contenitore.nowrap— riduce gli spazi bianchi comenormal, ma il testo non va mai a capo. La riga continua finché non si incontra un<br>. Questo è il sostituto di<nobr>.pre— gli spazi bianchi e le interruzioni di riga vengono preservati esattamente come scritti nel sorgente. Il testo non va a capo (simile all'elemento<pre>).pre-wrap— preserva gli spazi bianchi e le interruzioni di riga del sorgente, e fa andare a capo il testo quando supera il contenitore.pre-line— preserva le interruzioni di riga del sorgente ma riduce gli altri spazi bianchi, e va a capo quando necessario.
Evitare l'overflow orizzontale
Una riga senza a capo può spingersi oltre il bordo del suo contenitore. Per mantenere la pagina ordinata, aggiungi una barra di scorrimento al contenitore con la proprietà overflow invece di lasciare che la riga trabocchi sul resto della pagina:
<!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 mantenere il testo su una riga — e quando no
white-space: nowrap è la scelta giusta quando l'a capo romperebbe il significato o il layout di contenuti brevi e atomici:
- Celle di tabella che non devono dividere un valore su più righe (date, prezzi, numeri di telefono).
- Etichette di pulsanti e badge, affinché un'etichetta breve rimanga su una riga.
- Voci di menu di navigazione, affinché ogni link rimanga intatto.
- Numeri di telefono, codici o nomi che si desidera mantenere visivamente uniti.
È lo strumento sbagliato per testi lunghi del corpo. Forzare i paragrafi su una sola riga crea scorrimento orizzontale, che è difficile da leggere. Per contenuti lunghi che devono adattarsi, fai il contrario — consenti l'interruzione:
overflow-wrap: break-wordconsente al browser di interrompere una parola altrimenti non interrompibile (come una URL) solo quando traboccherebbe.word-breakcontrolla come le parole vengono interrotte, inclusa l'interruzione tra qualsiasi due caratteri per CJK o colonne molto strette.
Per suggerire un punto di interruzione opzionale all'interno di una stringa lunga (ad esempio, una URL) senza forzarne uno, usa l'elemento HTML <wbr>.
Il tag obsoleto <nobr>
Il tag <nobr> era una coppia di elementi: il contenuto si trovava tra il tag di apertura <nobr> e quello di chiusura </nobr>. Viene mostrato qui solo come riferimento — non scriverlo nel nuovo codice.
Un testo ordinario e molto lungo su una riga — esempio 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>Risultato
Poiché <nobr> non è standard, non ha senso stilizzarlo o gestirlo tramite script attraverso gli attributi globali id/class — sostituisci l'elemento con uno standard (come un <span> o un <p>) con white-space: nowrap, e applica lì i tuoi attributi.