Gestire il testo nel flusso inline: spazi, ritorni a capo e contenuti che vanno a capo

Introduzione

Quando si studiano gli elementi inline e block-level, è importante capire anche come il browser gestisce il testo all’interno del flusso del documento. Gli elementi inline, come , <a>,  ed , non occupano automaticamente una nuova riga: vengono disposti uno accanto all’altro, seguendo lo spazio disponibile nel contenitore.

Questo comportamento è utile per creare paragrafi naturali, link all’interno di una frase, etichette e brevi elementi evidenziati. Tuttavia, può provocare problemi quando il contenuto è molto lungo, quando sono presenti parole senza spazi oppure quando si vuole controllare il modo in cui una frase si interrompe su più righe.

In questo tutorial analizzeremo il cosiddetto inline formatting context, cioè il meccanismo con cui il browser dispone i contenuti inline. Vedremo come gestire gli spazi bianchi, le parole troppo lunghe, le interruzioni di riga e i collegamenti che devono rimanere leggibili anche su schermi piccoli.

Codice completo

<article class="card">
  <h2>Documentazione del progetto</h2>

  <p>
    Consulta la
    <a href="/guida">guida principale</a>
    e verifica l´ultima versione disponibile.
  </p>

  <p class="code-line">
    Identificatore:
    <code>utente_1234567890abcdef</code>
  </p>

  <p class="notice">
    Stato:
    <strong>operazione completata</strong>.
    Puoi continuare con il passaggio successivo.
  </p>
</article>

<style>
  .card {
    max-width: 34rem;
    padding: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
    font-family: Arial, sans-serif;
    line-height: 1.6;
  }

  .card a {
    overflow-wrap: anywhere;
  }

  .code-line code {
    overflow-wrap: anywhere;
    background: #f1f5f9;
    padding: 0.15rem 0.3rem;
    border-radius: 0.25rem;
  }

  .notice {
    white-space: normal;
  }

  .notice strong {
    color: #166534;
  }
</style>

Spiegazione

Il testo inline occupa solo lo spazio necessario

In una frase, gli elementi inline vengono inseriti nella stessa riga del testo finché esiste spazio sufficiente. Quando la riga è piena, il browser crea automaticamente una nuova riga. Non è necessario aggiungere manualmente un elemento block per ogni parte della frase.

Nel seguente esempio, il link è inline e fa parte del periodo:

<p>
  Leggi la
  <a href="/documentazione">documentazione tecnica</a>
  prima di iniziare.
</p>

Il link può rimanere sulla stessa riga oppure andare a capo insieme ad alcune parole. Il browser cerca di mantenere leggibile il contenuto, rispettando gli spazi e le regole di impaginazione disponibili.

Spazi e ritorni a capo nel codice HTML

Gli spazi e i ritorni a capo presenti nel sorgente HTML vengono normalmente compressi in un singolo spazio visivo. Di conseguenza, scrivere una frase su più righe nel codice non significa necessariamente creare più righe nella pagina.

<p>
  Questo testo viene visualizzato come
  una frase continua nel browser.
</p>

Il risultato visivo sarà equivalente, nella maggior parte dei casi, a una singola frase con spazi normali. Questo comportamento è definito dalla proprietà CSS white-space, il cui valore predefinito è generalmente normal.

Gestire parole e stringhe molto lunghe

Un problema frequente si presenta con URL molto lunghi, identificatori tecnici, codici, indirizzi email o stringhe senza spazi. Se il contenitore è stretto, queste stringhe possono fuoriuscire dai suoi bordi e creare uno scorrimento orizzontale indesiderato.

La proprietà overflow-wrap: anywhere consente al browser di interrompere la stringa in un punto appropriato quando non esiste un’alternativa migliore:

.contenitore {
  overflow-wrap: anywhere;
}

Questa regola è particolarmente utile per contenuti generati dinamicamente. Deve però essere applicata con criterio: interrompere una parola in modo arbitrario può ridurne la leggibilità, quindi è meglio usarla soprattutto per valori tecnici o non linguistici.

Confronto tra white-space e overflow-wrap

Le due proprietà risolvono problemi diversi. white-space stabilisce come trattare spazi, tabulazioni e ritorni a capo. overflow-wrap, invece, controlla se una parola o una stringa troppo lunga può essere spezzata per evitare lo sforamento.

.testo-normale {
  white-space: normal;
}

.testo-preformattato {
  white-space: pre;
}

.stringa-tecnica {
  overflow-wrap: anywhere;
}

Il valore pre mantiene gli spazi e i ritorni a capo originali. È adatto a contenuti preformattati, come brevi configurazioni o frammenti testuali, ma non dovrebbe essere usato indiscriminatamente nei normali paragrafi.

Interrompere una frase in modo esplicito

Quando una nuova riga è semanticamente necessaria, è possibile usare  . Questo elemento crea un’interruzione di riga all’interno del flusso inline.

<p>
  Via Roma 10<br>
  00100 Roma
</p>

È appropriato per indirizzi, poesie, testi brevi o contenuti in cui la divisione su più righe ha un significato. Non è consigliabile utilizzarlo ripetutamente per costruire spazi verticali o simulare un layout: in questi casi è preferibile intervenire con CSS e con una struttura HTML corretta.

Best practice

Usa gli elementi inline per contenuti che fanno parte di una frase, come link, parole evidenziate e piccoli frammenti tecnici.
Lascia che il browser gestisca normalmente il ritorno a capo del testo, invece di inserire molti elementi  .
Applica overflow-wrap: anywhere a URL, token, codici e identificatori potenzialmente molto lunghi.
Usa white-space: pre solo quando spazi e ritorni a capo devono essere conservati esattamente.
Verifica il comportamento su contenitori stretti e dispositivi mobili.
Non usare stringhe di spazi nel markup per allineare elementi: la presentazione deve essere gestita dal CSS.
Testa i link lunghi e i contenuti generati dagli utenti, perché potrebbero contenere valori imprevedibili.
Inserisci   solo quando l’interruzione ha un significato reale, ad esempio in un indirizzo postale.

Riepilogo

Gli elementi inline partecipano al flusso del testo e vengono disposti sulla stessa riga finché lo spazio lo consente. Quando la riga termina, il browser manda automaticamente il contenuto a capo. Gli spazi e i ritorni a capo del codice sorgente vengono normalmente compressi, mentre la proprietà white-space consente di modificare questo comportamento.

Per evitare che URL, codici e stringhe prive di spazi escano dal contenitore, overflow-wrap: anywhere rappresenta una soluzione pratica. L’elemento   va invece riservato alle interruzioni di riga realmente significative. Comprendere queste regole permette di creare contenuti inline leggibili, solidi e adatti anche a layout stretti o responsive.

Approfondisci con risorse ufficiali

Add as preferred source on Google