Come ritagliare un testo lungo con i CSS. Ritaglia il testo su una o più righe in altezza con l'aggiunta di ellissi Aggiunta di una sfumatura al testo

Vlad Merzhevich

Nonostante il fatto che i monitor di grandi diagonali stiano diventando sempre più accessibili e la loro risoluzione sia in costante crescita, a volte il compito si presenta in uno spazio limitato per adattarsi a molto testo. Ad esempio, questo potrebbe essere necessario per la versione mobile del sito o per un'interfaccia in cui il numero di righe è importante. In questi casi, ha senso troncare lunghe righe di testo, lasciando solo l'inizio della frase. Quindi porteremo l'interfaccia in una forma compatta e ridurremo la quantità di informazioni visualizzate. L'effettivo taglio delle righe può essere fatto lato server usando lo stesso PHP, ma tramite CSS è più semplice, inoltre, puoi sempre mostrare l'intero testo, ad esempio, quando ci passi sopra il cursore del mouse. Successivamente, considereremo i metodi per tagliare il testo con forbici immaginarie.

In effetti, tutto si riduce all'utilizzo della proprietà overflow con il valore nascosto. Le differenze risiedono solo nella diversa visualizzazione del nostro testo.

Usando l'overflow

Affinché la proprietà overflow si mostri con il testo in tutto il suo splendore, è necessario annullare il ritorno a capo del testo utilizzando lo spazio bianco con il valore nowrap. Se ciò non viene fatto, l'effetto di cui abbiamo bisogno non sarà, la sillabazione verrà aggiunta al testo e verrà visualizzato nella sua interezza. L'esempio 1 mostra come tagliare il testo lungo con un insieme specificato di proprietà di stile.

Esempio 1.overflow per il testo

HTML5 CSS3 IE Cr Op Sa Fx

Il risultato di questo esempio è mostrato in Fig. 1.

Riso. 1. Tipo di testo dopo aver applicato la proprietà di overflow

Come puoi vedere dalla figura, c'è solo un inconveniente in generale: non è ovvio che il testo abbia una continuazione, quindi l'utente deve esserne consapevole. Questo di solito viene fatto con un gradiente o con i puntini di sospensione.

Aggiungere un gradiente al testo

Per rendere più chiaro che il testo a destra non finisce, puoi sovrapporlo con un gradiente da trasparente a colore di sfondo (Figura 2). Ciò creerà l'effetto di una graduale dissoluzione del testo.

Riso. 2. Testo sfumato

L'esempio 2 mostra come creare questo effetto. Lo stile dell'elemento stesso rimarrà praticamente lo stesso, il gradiente stesso verrà aggiunto utilizzando lo pseudo-elemento :: after e CSS3. Per fare ciò, inseriamo uno pseudo-elemento vuoto tramite la proprietà content e gli applichiamo un gradiente con prefissi diversi per i browser principali (esempio 2). La larghezza del gradiente può essere facilmente modificata attraverso la larghezza, puoi anche regolare il grado di trasparenza sostituendo il valore di 0,2 con il tuo.

Esempio 2. Gradiente su testo

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

L'arpeggio intra-discreto trasforma la poly-row, questa è una verticale a un passo in un tessuto ultra-polifonico.

Questo metodo non funziona in Internet Explorer fino alla versione 8.0 inclusa, perché non supporta i gradienti. Ma puoi rinunciare a CSS3 e rendere il gradiente alla vecchia maniera, usando un'immagine PNG-24.

Questo metodo funziona solo con uno sfondo a tinta unita e, nel caso di un'immagine di sfondo, il gradiente sul testo sarà sorprendente.

Ellissi alla fine del testo

Puoi anche utilizzare i puntini di sospensione invece di una sfumatura alla fine del testo ritagliato. Inoltre, verrà aggiunto automaticamente utilizzando la proprietà text-overflow. È compreso da tutti i browser, comprese le versioni precedenti di IE, e l'unico inconveniente di questa proprietà è il suo stato ancora poco chiaro. Sembra che questa proprietà sia inclusa nei CSS3, ma il codice con essa non supera la convalida.

L'esempio 3 mostra l'uso della proprietà text-overflow con il valore ellissi, che aggiunge un'ellissi. Quando si posiziona il cursore del mouse sul testo, questo viene visualizzato nella sua interezza ed evidenziato con un colore di sfondo.

Esempio 3. Utilizzo di text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

Il risultato di questo esempio è mostrato in Fig. 3.

Riso. 3. Testo con puntini di sospensione

Un grande vantaggio di questi metodi è il fatto che il gradiente ei puntini di sospensione non vengono visualizzati se il testo è breve e rientra completamente nell'area specificata. Quindi il testo verrà visualizzato come di consueto quando è interamente visibile sullo schermo e ritagliato quando la larghezza dell'elemento viene ridotta.

In alcuni casi, il contenuto del blocco viene visualizzato al di fuori dei limiti dell'elemento, sovrapponendosi ad esso. La proprietà overflow viene utilizzata per controllare il comportamento degli elementi del blocco, che determina come deve essere visualizzato il contenuto che scorre all'esterno del blocco.

Utilizzando la proprietà clip, è possibile ritagliare un elemento alle dimensioni specificate.

1. La proprietà di overflow

Il contenuto degli elementi del blocco può traboccare dal blocco quando l'altezza e/o la larghezza sono impostate in modo esplicito per il blocco. Senza specificare un'altezza, la casella si allungherà per accogliere il contenuto, a meno che la casella non sia posizionata posizione: assoluta; o posizione: fissa; ... Il testo può superare il blocco in altezza, le immagini in altezza e larghezza.

2. La proprietà overflow-x

La proprietà specifica come verrà tagliato il bordo destro del contenuto all'interno del blocco in caso di overflow.

Sintassi:

Div (overflow-x: nascosto;)

3. La proprietà overflow-y

La proprietà specifica come verrà tagliato il bordo inferiore del contenuto all'interno del blocco in caso di overflow.

Sintassi:

Div (overflow-y: nascosto;)

4. La proprietà della clip

La proprietà determina quale parte dell'elemento sarà visibile. La parte dell'elemento che rimane visibile dopo il ritaglio è chiamata regione di ritaglio. Il ritaglio viene applicato a un elemento inizialmente completamente visibile. La proprietà si applica agli elementi la cui proprietà position è impostata su assoluta o fissa.

C'è un testo di lunghezza arbitraria che deve essere visualizzato all'interno di un blocco di altezza e larghezza fisse. In questo caso, se il testo non si adatta completamente, dovrebbe essere visualizzato un pezzo di testo che si adatta completamente al blocco specificato, dopodiché viene impostata un'ellissi.

Questo compito è abbastanza comune, ma allo stesso tempo non è così banale come sembra.

Opzione per testo a riga singola in CSS

In questo caso, puoi usare la proprietà text-overflow: ellipsis. In questo caso, il contenitore deve avere la proprietà straripamento pari nascosto o clip

Blocco (larghezza: 250 px; spazio bianco: nowrap; overflow: nascosto; text-overflow: ellissi;)

Opzione per testo CSS multilinea

Il primo modo per ritagliare il testo multilinea usando le proprietà CSS è applicare pseudo-elementi : prima e : dopo... Primo, markup HTML

E ora le proprietà stesse

Box (overflow: nascosto; altezza: 200 px; larghezza: 300 px; altezza linea: 25 px;) .box: prima (contenuto: ""; float: sinistra; larghezza: 5 px; altezza: 200 px;) .box> *: primo -child (float: destra; larghezza: 100%; margin-left: -5px;) .box: dopo (content: "\ 02026"; box-sizing: content-box; float: right; position: relativo; top: -25px; sinistra: 100%; larghezza: 3em; margin-left: -3em; padding-right: 5px; text-align: right; background-size: 100% 100%; background: linear-gradient (a destra, rgba (255, 255, 255, 0), bianco 50%, bianco);)

Un altro modo è usare la proprietà di larghezza di colonna con cui impostiamo la larghezza di colonna per il testo su più righe. Tuttavia, quando si utilizza questo metodo, non si otterranno i puntini di sospensione alla fine. HTML:

Block (overflow: nascosto; altezza: 200 px; larghezza: 300 px;) .block__inner (-webkit-column-width: 150 px; -moz-column-width: 150 px; column-width: 150 px; altezza: 100%;)

La terza soluzione per il testo su più righe in CSS è per i browser Webkit... In esso dovremo usare diverse proprietà specifiche con il prefisso -webkit... Il principale è -webkit-line-clamp, che consente di specificare il numero di righe da visualizzare in un blocco. La soluzione è bella ma piuttosto limitata a causa del suo lavoro in un gruppo limitato di browser

Block (overflow: nascosto; text-overflow: ellissi; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: verticale;)

Variante JavaScript per testo multilinea

Qui viene utilizzato un ulteriore blocco invisibile, in cui viene inizialmente posizionato il nostro testo, dopodiché viene rimosso un carattere alla volta fino a quando l'altezza di questo blocco è inferiore o uguale all'altezza del blocco desiderato. E alla fine, il testo si sposta nel blocco originale.

var blocco = documento. querySelector ("".block"), testo = blocco. innerHTML, clone = documento. createElement ("div"); clone. stile. posizione = "assoluto"; clone. stile. visibilità = "nascosto"; clone. stile. larghezza = blocco. clientWidth + "px"; clone. innerHTML = testo; documento. corpo. appendChild (clone); var l = testo. lunghezza - 1; for (; l> = 0 && clone. clientHeight> block. clientHeight; - l) (clone. innerHTML = text. substring (0, l) + "...";) block. innerHTML = clone. internoHTML;

Questo è sotto forma di un plugin jQuery:

(funzione ($) (var troncare = funzione (el) (var testo = el. testo (), altezza = el. altezza (), clone = el. clone (); clone. css ((posizione: "assoluto", visibilità: "nascosto", altezza: "auto")); el. after (clone); var l = testo. lunghezza - 1; for (; l> = 0 && clone. altezza ()> altezza; - l) ( clone.text (text.sottostringa (0, l) + "...");) el. text (clone.text ()); clone. remove ();); $. fn. truncateText = function () ( restituisce this. each (function () (truncate ($ (this));)););) (jQuery));

Ciao a tutti, mi chiamo Anna Blok e oggi parleremo di come ritagliare le immagini senza utilizzare programmi di grafica.

Dove può tornare utile?

Prima di tutto, sui siti in cui il contenuto con immagini molto probabilmente non verrà ritagliato su un blocco particolare.

Un esempio lampante: blog WordPress.

Supponiamo che tu voglia che la copertina dell'articolo sia 1: 1 (quadrato). Le tue azioni:

1. Scarica un'immagine adatta da Internet;
2. Ritaglialo in Photoshop alla proporzione desiderata;
3. Pubblica il tuo articolo.

Entrando nel sito, vedrai il risultato che ti aspettavi.

Ma supponiamo che tu abbia dimenticato di ritagliare un'immagine in Photoshop e caricare un'immagine casuale come copertina da Internet, cosa accadrà allora?! Esatto, il layout si romperà. E se non hai utilizzato affatto i CSS, l'immagine in risoluzione HD potrebbe sovrapporsi completamente all'intera visualizzazione del testo. Pertanto, è importante essere in grado di ritagliare le immagini utilizzando gli stili CSS.

Diamo un'occhiata a diverse situazioni su come questo può essere implementato non solo con CSS, ma anche con SVG.

Esempio 1

Proviamo a ritagliare l'immagine che è posizionata con background-image. Creiamo del markup HTML

Passando allo stile CSS. Usando background-image, aggiungi l'immagine, imposta i bordi per la nostra immagine, centra l'immagine usando background-position e imposta la dimensione dello sfondo:

jpg); posizione di sfondo: centro centro; dimensione dello sfondo: copertina; larghezza: 300 px; altezza: 300 px; )

Questo è stato il primo e più semplice metodo per ritagliare un'immagine. Ora diamo un'occhiata a un secondo esempio.

Esempio 2

Supponiamo di avere lo stesso contenitore box all'interno del quale c'è un tag img con un'immagine che ora andremo a modellare.

Metteremo anche la nostra immagine centrata rispetto all'oggetto che andremo a creare. E usiamo una proprietà che viene usata raramente: object-fit.

Box (posizione: relativa; overflow: nascosto; larghezza: 300 px; altezza: 300 px;) .box img (posizione: assoluta; alto: 50%; sinistra: 50%; trasformazione: traduci (-50%, - 50%); larghezza: 300 px; altezza: 300 px; adattamento all'oggetto: copertina;)

Questo è il metodo migliore secondo me. È perfetto per i blog se usi immagini per i tuoi post in proporzioni molto diverse.

Puoi leggere di più su HTML e CSS qui:

Esempio 3

Possiamo anche creare ritagli per le immagini al momento se le inseriamo negli elementi SVG. Prendiamo come esempio un cerchio. Possiamo creare SVG usando i tag. Crea un tag svg di bordo all'interno del quale avrà un tag cerchio e un tag modello. Nel tag del modello, scrivi il tag dell'immagine. In esso, specifichiamo l'attributo xlink: href e aggiungiamo un'immagine. Aggiungeremo anche gli attributi di larghezza e altezza. Ma non è tutto. Dovremo aggiungere un valore di riempimento. Per completare il nostro lavoro, aggiungeremo un attributo ausiliario preserveAspectRatio al tag dell'immagine, che riempirà la nostra immagine "da e verso" attorno al cerchio.

Non posso chiamare questo metodo universale. Ma può essere utilizzato in casi eccezionali. Ad esempio, se abbiamo toccato l'argomento di un blog, idealmente un tale metodo potrebbe adattarsi all'avatar dell'autore che sta scrivendo l'articolo.

Puoi leggere di più su HTML e CSS qui:

Risultati:
Abbiamo trattato 3 metodi per ritagliare un'immagine sui siti Web: utilizzare l'immagine di sfondo utilizzando il tag img e associato al pattern svg con l'incorporamento di bitmap utilizzando il tag immagine. Se conosci altri metodi per ritagliare un'immagine utilizzando SVG, condividili nei commenti. Sarà utile non solo per me, ma anche per gli altri conoscerli.

Non dimenticare di porre le tue domande di programmazione o sviluppo front-end ai professionisti su FrontendHelp online.

In questo articolo vi parleremo di 3 tecniche CSS facili e veloci che puoi utilizzare per mostrare solo una parte dell'immagine sulla tua pagina.

Tutti i metodi utilizzati qui in realtà richiedono solo un paio di righe CSS codice. Tuttavia, questa non è circoncisione nel senso letterale della parola ( CSS non possiamo ancora farlo), ci nascondiamo e mostriamo solo quella parte dell'immagine che vogliamo vedere.

Queste tecniche possono essere molto utili se si vuole portare un'immagine ad una certa dimensione, cioè se si vuole creare, ad esempio, la sua miniatura (una copia ridotta dell'immagine) nella sezione news o qualcosa di simile.

Tecnica 1 - Utilizzo di margini negativi ( Margini negativi)

Se non vuoi usare margini negativi, ti suggeriamo di usare la tecnica №2 ... Include un genitore (paragrafo) che ha una larghezza e un'altezza specifiche. Questo paragrafo ha la proprietà posizionamento specificato come relativo. La larghezza e l'altezza determinano le dimensioni del campo visualizzato. E l'immagine posta all'interno del paragrafo ha la proprietà posizionamento impostato su assoluto. Quindi possiamo usare le proprietà in alto (in alto) e sinistra sistemare l'immagine come vogliamo, determinando nel processo quale parte dell'immagine mostrare e quale no.

HTML identico al codice della tecnica precedente:

Tecnica 3 - Utilizzo della proprietà di affettatura ( Proprietà clip)

Questa tecnica dovrebbe essere la più semplice, poiché proprietà clip definisce la parte dell'elemento da mostrare. Sembra una soluzione perfetta, ma c'è un intoppo: elemento ritagliato deve essere posizionato assolutamente. Per poter utilizzare un elemento, dobbiamo aggiungere un elemento aggiuntivo, calcolare la dimensione dell'area visibile dell'immagine, aggiungere questa dimensione al genitore, utilizzare il genitore ... Molto lavoro, non è esso?

Oh, un altro problema: la dimensione dell'elemento ritagliato non viene ridotta alla dimensione del ritaglio, ma rimane la dimensione originale (l'immagine fuori dal ritaglio è semplicemente nascosta). Dobbiamo usare il posizionamento assoluto per spostare la finestra nell'angolo in alto a sinistra del genitore.

Tuttavia, non si può non menzionare proprietà di affettare... E così di nuovo il codice...