Come limitare le righe di testo solo con i CSS

Limitare la quantità di testo in un elemento è un requisito comune del web design. Vedrai spesso un articolo con un estratto di tre o quattro righe con un pulsante che ti consente di espandere il testo completo.

Puoi creare questo design utilizzando una combinazione di CSS e JavaScript. Ma puoi farlo anche usando solo CSS. Scopri due modi per limitare il testo in una casella e come puoi creare un pulsante di espansione dinamico utilizzando solo CSS.

La tecnica del webkit

Crea una cartella vuota e modifica due file al suo interno: indice.html E style.css. Dentro il indice.html file, creare uno scheletro HTML:

html>
<htmllang="it">
<Testa>
<titolo>Documentotitolo>
<collegamentorel="foglio di stile"href="stile.css">
Testa>
<corpo>
corpo>
html>

Un collegamento in sezione, al style.css file, garantisce che qualsiasi CSS aggiunto a quel file venga applicato a questa pagina. Successivamente, incolla il seguente markup HTML all'interno del file tag dentro indice.html:

<sezioneclasse="gruppo di carte">
<articoloclasse="carta">
<h2>Articolo 1h2>
<Pclasse="testo tagliato">
 Il testo di 300 parole va qui
P>
<ingressotipo="casella di spunta"classe="espandi-btn">
articolo>
<articoloclasse="carta">
<h2>Articolo 2h2>
<Pclasse="testo tagliato">
 Il testo di 200 parole va qui
P>
<ingressotipo="casella di spunta"classe="espandi-btn">
articolo>
<articoloclasse="carta">
<h2>Articolo 1h2>
<Pclasse="testo tagliato">
 Il testo di 100 parole va qui
P>
<ingressotipo="casella di spunta"classe="espandi-btn">
articolo>
sezione>

La struttura di questo HTML è semplice, ma utilizza ancora markup semantico per l'accessibilità. Un elemento sezione contiene tre elementi articolo. Ogni articolo comprende un'intestazione, un paragrafo e un elemento di input. Utilizzerai i CSS per modellare ogni sezione dell'articolo in una scheda.

Nel frattempo, la tua pagina sarà simile a questa:

Dall'immagine sopra, puoi vedere diverse lunghezze di testo in ogni paragrafo. 300 parole nel primo, 200 parole nel secondo e 100 nel terzo.

Il passaggio successivo consiste nell'iniziare a dare uno stile alla pagina aggiungendo CSS al file style.css file. Inizia reimpostando il bordo sul documento e assegnando al corpo un colore di sfondo bianco:

*, *::Prima, *::Dopo {
dimensionamento della scatola: scatola di confine;
}
corpo {
sfondo: #f3f3f3;
trabocco: nascosto;
}

Successivamente, trasforma l'elemento con la classe card-group in un contenitore a griglia con tre colonne. Ogni sezione dell'articolo occupa una colonna:

.card-group {
Schermo: griglia;
colonne-modello-griglia: ripetere(3, 1fr);
spacco: .5rim;
align-elementi: avvio flessibile;
}

Modella ogni sezione dell'articolo come una carta con uno sfondo bianco e un bordo nero leggermente arrotondato:

.carta {
sfondo: bianco;
imbottitura: 1rem;
confine: 1pxsolidonero;
bordo-raggio: .25em;
}

Infine, aggiungi alcuni margini:

h2, P {
margine: 0;
}
h2 {
margine inferiore: 1rem;
}

Salva il file e controlla il tuo browser. La pagina dovrebbe avere l'aspetto della pagina mostrata nell'immagine qui sotto:

Il passaggio successivo consiste nel ridurre il numero di righe per ogni testo a 3. Ecco il CSS per questo:

.testo-troncato {
--max-linee: 3; 
trabocco: nascosto;

Schermo: -webkit-scatola; 
-webkit-box-orient: verticale;
-webkit-linea-morsetto: var(--max-linee);
}

Inizia impostando una variabile CSS, max-lines, a 3 e nascondendo il contenuto traboccante. Quindi impostare il display su -webkit-scatola e bloccare la linea a 3.

L'immagine seguente mostra il risultato. Ogni scheda mostra un'ellisse sulla terza riga di testo:

Questa tecnica può essere piuttosto complicata da realizzare. Se dovessi omettere qualsiasi proprietà, tutto andrebbe in frantumi. Un altro svantaggio è che non è possibile utilizzare una proprietà di visualizzazione diversa da --webkit-scatola. Ad esempio, potresti volerlo usa Grid o Flexbox. Per questi motivi, la seguente tecnica è migliore.

Un approccio più flessibile alla limitazione del numero di righe nel testo

Questa tecnica ti consente di fare la stessa cosa dell'approccio webkit, con gli stessi risultati. Ma la grande differenza è che hai un sacco di flessibilità perché stai impostando tu stesso l'altezza. Inoltre puoi utilizzare qualsiasi proprietà di visualizzazione o qualsiasi opzione di stile che preferisci.

Per iniziare, sostituisci il blocco CSS per .cutoff-testo con questo:

.testo-troncato {
--max-linee: 5;
--altezza della linea: 1.4;
altezza: cal(var(--max-linee) * 1em * var(--altezza della linea));
altezza della linea: var(--altezza della linea);
posizione: parente;
}

L'impostazione dell'altezza della linea è importante perché è necessario tenerne conto quando si determina l'altezza. Per ottenere l'altezza, moltiplichi l'altezza della riga per la dimensione del carattere e il numero di righe.

Noi aggiungiamo posizione: relativa proprietà perché ne abbiamo bisogno per aggiungere l'effetto di dissolvenza. Aggiungi il seguente CSS per completare l'effetto:

.testo-troncato::Prima {
contenuto: "";
posizione: assoluto;
altezza: cal(2em * var(--altezza della linea));
larghezza: 100%;
metter il fondo a: 0;
eventi puntatore: nessuno;
sfondo: gradiente lineare(Ametter il fondo a, trasparente, bianco);
}

Il CSS sopra sfoca l'ultima riga di testo in ogni scheda. È possibile ottenere un effetto dissolvenza utilizzando il sfondo proprietà e un gradiente. Devi impostare eventi puntatore A nessuno per garantire che l'elemento non sia selezionabile.

Ecco il risultato:

Questa tecnica ha ottenuto lo stesso risultato della precedente (più la sfocatura alla fine). Ma ottieni maggiore flessibilità per utilizzare altri tipi di layout e design.

Aggiunta di un pulsante di espansione e compressione dinamica

L'aggiunta di un pulsante espandi/comprimi rende le carte più realistiche e interattive. Con questo modello, espandi il contenuto facendo clic su Espandere pulsante, dopodiché il testo cambia in Crollo. Quindi il testo del pulsante passa da "Espandi" a "Comprimi" mentre fai clic su di esso. Inoltre, il resto del contenuto viene visualizzato e nascosto in ogni rispettivo stato.

Hai già definito un ingresso elemento nel tuo codice HTML. Questo elemento fungerà da pulsante. Per modellare questo input in un pulsante, includi il seguente CSS nel tuo foglio di stile:

.expand-btn {
aspetto: nessuno;
confine: 1pxsolidonero;
imbottitura: .5em;
bordo-raggio: .25em;
cursore: puntatore;
margine superiore: 1rem;
}

Quando passi il mouse sul pulsante, vuoi cambiare il colore di sfondo:

.expand-btn: al passaggio del mouse {
colore di sfondo: #ccc;
}

Ora il CSS per cambiare il testo quando l'input è controllato:

.expand-btn::Prima {
contenuto: "Espandere"
}
.expand-btn:controllato::Prima {
contenuto: "Crollo"
}

Ora quando fai clic sul pulsante/input, il testo va da Espandere A Crollo. Ma il contenuto stesso non si espanderà ancora. Per fare in modo che lo faccia quando fai clic sul pulsante, aggiungi il seguente CSS:

.testo-troncato:ha(+.expand-btn:controllato) {
altezza: auto;
}

Questo esempio utilizza has() Selettore CSS per scegliere come target l'elemento. Con questo codice, stai dicendo che se l'area di testo tagliata ha un pulsante di espansione selezionato, l'altezza della carta dovrebbe essere auto (che lo espande).

Ecco il risultato:

Altri suggerimenti e trucchi CSS da imparare

Questo articolo ha mostrato due diversi metodi per limitare il numero di righe in una casella utilizzando i CSS. Abbiamo anche aggiunto un pulsante per espandere/comprimere il contenuto senza scrivere una sola riga di JavaScript.

Ma ci sono tantissimi altri suggerimenti e trucchi nei CSS. Questi suggerimenti ti offrono un modo creativo per ottenere i layout desiderati senza compromettere le prestazioni, la leggibilità o l'accessibilità.