Corso di CSS / Overflow CSS, testo lungo a capo e puntini di sospensione

La proprietà overflow controlla il contenuto che si estende oltre una casella, ma da sola non sceglie una strategia utile per mandare il testo a capo. Combina un comportamento intenzionale dell'overflow con le regole di ritorno a capo e usa l'ellissi solo quando i lettori possono ancora accedere a tutte le informazioni.

Confronta i valori di overflow con contenuti identici

L'aspetto effettivo della barra di scorrimento e se essa sia sempre visibile dipende dalle impostazioni della barra di scorrimento sovrapposta del sistema operativo e del browser. Specificare scroll non significa che la barra rimarrà visibile in tutti gli ambienti. Un contenitore con hidden può essere fatto scorrere anche tramite script o spostamento del focus, quindi non significa che “il contenuto stesso sia scomparso.” Clip, che impedisce completamente lo scorrimento, è un valore separato e non dovrebbe essere considerato lo stesso di hidden. Il funzionamento dettagliato è spiegato nella descrizione dell'overflow di MDN. Prima di nascondere il contenuto in eccesso, scegli un’altezza adatta consultando la lezione Dimensioni CSS, limiti min/max e box-sizing.

Se il testo generale viene trattato come altezza fissa e nascosto, le informazioni potrebbero scomparire quando si aggiungono frasi, si traducono o si ingrandiscono i caratteri. Prima considera di lasciare l'altezza al contenuto e usa auto se sono necessarie restrizioni di dimensione, come in un pannello separato. L'esempio completo mette quattro frasi identiche nella stessa casella da 96px e confronta solo i valori. Dopo la parte visibile, abbiamo lasciato un po' di spazio extra per l'esercizio in modo che il testo in eccedenza non oscuri la spiegazione seguente.

Mandare a capo URL e identificatori lunghi

.url { overflow-wrap: anywhere; }

Gli URL senza spazi, i codici identificativi o le parole lunghe possono spingere fuori il contenitore perché non ci sono abbastanza punti per andare a capo. overflow-wrap: anywhere offre la possibilità di andare a capo nel mezzo della stringa se necessario. Non elimina il carattere stesso né inserisce un carattere di interruzione di riga nel valore della stringa. Cambia solo la visualizzazione, quindi puoi mantenere la stringa originale.

Applicare word-break: break-all ovunque può rompere parole comuni inutilmente. Inizia permettendo le interruzioni nelle aree di valori lunghi. Flexbox e Grid possono anche imporre dimensioni minime automatiche, quindi controlla separatamente min-width sull’elemento interessato. Andare a capo del testo e consentire alla sua casella di ridursi risolve parti diverse del problema. Per ulteriori dettagli, vedere MDN: overflow-wrap, Allineamento Flexbox, wrapping, gap, crescita e riduzione.

Soddisfare le condizioni per l'ellissi su singola linea

.title {
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

text-overflow di per sé non determina la dimensione della casella o delle interruzioni di riga. L'abbreviazione su più righe è anche un metodo separato da questo esempio su singola riga. L'esempio completo appare nel paragrafo sottostante con il titolo completo così puoi rileggere il testo troncato. Non nascondere contenuti che richiedono il testo originale, come istruzioni importanti o messaggi di errore, senza un modo per verificarli altrove. Raccomandiamo di non usare il tooltip del mouse dell'attributo title come unica fonte di testo. MDN: text-overflow.

Rendi accessibili tramite tastiera i pannelli scorrevoli

<div class="panel auto" tabindex="0" role="region" aria-label="Notice scroll area">
  <p>Notice content</p>
</div>

A seconda del browser, l'area di scorrimento potrebbe o meno ricevere automaticamente il focus della tastiera. Specificando tabindex="0" per il pannello a cui è necessario accedere, è possibile navigarvi nell'ordine normale di tabulazione. role="region" e un nome descrittivo aiutano gli utenti di tecnologie assistive a capire in quale regione si trovano. Non è necessario rendere ogni box un obiettivo di focus o un'area.

L'esempio fornisce accesso tramite tastiera, un nome e un contorno di focus solo ai pannelli auto e scroll che richiedono effettivamente lo scorrimento. Dopo essere entrati con Tab, verifica se puoi spostarti all'ultimo paragrafo usando i tasti freccia o Page Down. Su schermi stretti, assicurati anche che vi sia una distinzione tra lo scorrimento all'interno del pannello e lo scorrimento della pagina.

Esegui l'esempio completo di overflow

Salva e apri il codice qui sotto come UTF-8 in overflow.html. Include tutti e quattro i pannelli dello stesso contenuto, URL lunghi e titoli abbreviati per preservare il testo originale. L'indirizzo example.com è una stringa dimostrativa per osservare il ritorno a capo e non è un link di risorsa reale.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing overflowing content</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .panel { width: 100%; max-width: 320px; height: 96px; padding: 12px;
      border: 2px solid #777; background: #eef6fa; }
    .panel p { margin: 0 0 8px; }
    .visible { overflow: visible; }
    .visible-stage { padding-bottom: 240px; }
    .hidden { overflow: hidden; }
    .auto { overflow: auto; }
    .scroll { overflow: scroll; }
    .panel:focus-visible { outline: 3px solid #9b5d00; outline-offset: 3px; }
    .url { max-width: 320px; padding: 12px; border: 1px solid #777; overflow-wrap: anywhere; }
    .title { width: 100%; max-width: 320px; padding: 12px; border: 1px solid #777;
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .original { max-width: 320px; }
  </style>
</head>
<body>
  <h1>Overflow and truncation</h1>
  <section class="visible-stage"><h2>visible</h2><div class="panel visible"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="hidden-stage"><h2>hidden</h2><div class="panel hidden"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="auto-stage"><h2>auto</h2><div class="panel auto" tabindex="0" role="region" aria-label="auto overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <section class="scroll-stage"><h2>scroll</h2><div class="panel scroll" tabindex="0" role="region" aria-label="scroll overflow comparison"><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p><p>The garden notice must remain readable to the end. This sentence repeats to demonstrate overflow.</p></div></section>
  <h2>Long URL wrapping</h2><p class="url">https://example.com/abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</p>
  <h2>Single-line truncation</h2><p class="title">A day of plant care and visitor preparation at Small Garden</p>
  <p class="original">Full title: A day of plant care and visitor preparation at Small Garden</p>
</body>
</html>

1. Confronta gli ultimi paragrafi dei quattro pannelli. In visible, appare all'esterno del bordo, in hidden è nascosto, e con auto e scroll, deve essere raggiungibile scorrendo all’interno del pannello.
2. Lascia solo un paragrafo nel pannello auto. Quando il contenuto diventa abbastanza breve, verifica se lo spazio di scorrimento scompare e ripristinalo a quattro paragrafi. Non giudicare se c'è overflow solo osservando la barra.
3. Raggiungi il pannello auto con Tab e controlla i contenuti sottostanti con i tasti freccia. Assicurati che il contorno del focus sia visibile, quindi usa Shift+Tab per spostarti all’elemento precedente nell’ordine di tabulazione.
4. Disattiva le dichiarazioni overflow-wrap negli URL e riduci la finestra. Controlla se le stringhe lunghe oltrepassano orizzontalmente e poi ripristina anywhere.
5. Modifica solo il text-overflow del titolo in clip e confronta i risultati del taglio senza i puntini di sospensione. Successivamente, cambia nowrap in normal per controllare il risultato del ritorno a capo delle righe e riportalo al valore originale.

Se l'intera pagina viene spinta orizzontalmente, controlla la larghezza minima/il padding dell'elemento più largo e del suo genitore. Se il contenuto da leggere scompare, controlla prima l'altezza fissa e il contenuto nascosto. Prima di aggiungere lo scorrimento o i puntini di sospensione, devi determinare come preservare il testo originale e se il lettore può raggiungerlo con i controlli disponibili.