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 frammento di testo che si adatta completamente al blocco specificato, dopodiché vengono impostati i puntini di sospensione.
Tale compito è abbastanza comune, allo stesso tempo, non è così banale come sembra.
In questo caso, puoi utilizzare la proprietà text-overflow: ellissis. In questo caso, il contenitore deve avere la proprietà traboccare pari nascosto O clip
Blocco ( larghezza : 250px ; spazi bianchi : nowrap ; overflow : nascosto ; text-overflow : ellissi ; )
Primo modo per tagliare il testo multilinea utilizzando Proprietà CSS applicare pseudo-elementi :Prima E :Dopo. Iniziamo con il markup HTML
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facili si.
E ora le proprietà stesse
Box ( overflow : hidden ; height : 200px ; width : 300px ; line-height : 25px ; ) .box :before ( content : "" ; float : left ; width : 5px ; height : 200px ; ) .box > * :first -child ( float : right ; width : 100% ; margin-left : -5px ; ) .box :after ( content : "\02026" ; box-sizing : content-box ; float : right ; position : relative ; top : -25px ; left : 100% ; width : 3em ; margin-left : -3em ; padding-right : 5px ; text-align : right ; background-size : 100% 100% ; background : linear-gradient (to right , rgba (255 , 255 , 255 , 0 ), bianco 50% , bianco ); )
Un altro modo è utilizzare la proprietà column-width, che imposta la larghezza della colonna per il testo multilinea. È vero, quando si utilizza questo metodo, non funzionerà per installare i puntini di sospensione alla fine. codice HTML:
Blocco ( overflow : nascosto ; altezza : 200px ; larghezza : 300px ; )
Il terzo modo per risolvere il testo multilinea in CSS è per i browser WebKit. In esso, dovremo utilizzare diverse proprietà specifiche contemporaneamente con il prefisso -webkit. Il principale è -webkit-line-clamp che consente di specificare il numero di righe da visualizzare nel blocco. La soluzione è bella ma piuttosto limitata a causa del suo funzionamento in un gruppo ristretto di browser
Blocco ( overflow : nascosto ; text-overflow : ellissi ; display : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ; )
Qui viene utilizzato un ulteriore blocco invisibile, in cui viene inizialmente posizionato il nostro testo, dopodiché viene cancellato un carattere alla volta fino a quando l'altezza di questo blocco diventa minore o uguale all'altezza blocco desiderato. E alla fine il testo viene spostato 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 . innerHTML ;
Questo è sotto forma di un plugin per jQuery:
(function ($) ( var truncate = function (el ) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( position : "absolute" , visibilità : "nascosto" , altezza : "auto" )); el .after (clone ); var l = testo . lunghezza - 1 ; for (; l >= 0 && clone . altezza () > altezza ; -- l ) ( clone . text (text . substring (0 , l ) + "..." ); ) el . text (clone . text ()); clone . remove (); ); $ . fn . truncateText = function () ( return this . each (function () ( tronca ($ (this )); )); ); )(jQuery ));
Vogliamo che tutto sul sito sia sempre ordinato, ma ad esempio hai dei blocchi con del testo che deve essere inserito entro certi limiti, questo può essere un annuncio per un articolo o una descrizione di un prodotto. Il testo è di lunghezza arbitraria. Naturalmente, puoi adattare costantemente il testo alla dimensione del campo in modo che non vada nulla, ma puoi fare in modo che il testo extra sia nascosto.
C'è una semplice soluzione CSS per questo. Uso della proprietà text-overflow: puntini di sospensione , che consente di tagliare una stringa con un lungo test. In modo da questa decisione ha funzionato è necessario specificare la larghezza del blocco padre e avere la proprietà traboccare pari nascosto O clip .
Box-text ( text-overflow: ellissis; //immagine di riquadri lunghi con testo in eccesso: nascosto; //nascondi la larghezza del testo in eccesso: 100%; //larghezza del riquadro con spazio vuoto di testo: nowrap; //vieta il wrapping testo)
Tutte le loro attrezzature e strumenti erano vivi, in una forma o nell'altra.
Ma per ritagliare il testo multilinea nei CSS, devi ricorrere a pseudo-elementi :Prima E :Dopo .
Box-text ( overflow: hidden; height: 200px; line-height: 25px; ) .box-text:before ( content: ""; float: left; width: 5px; height: 200px; ) .box-text > * :first-child ( float: right; width: 100%; margin-left: -5px; ) .box-text:after ( content: "\02026"; box-sizing: content-box; float: right; position: relativo; superiore: -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); )
Il lato sinistro della foresta era buio, in ombra; quello di destra, bagnato, lucido, brillava al sole, ondeggiando leggermente al vento. Tutto era in fiore; gli usignoli cinguettavano e rotolavano ora vicini, ora lontani.
Ciao a tutti, mi chiamo Anna Blok e oggi parleremo di come ritagliare immagini senza usare programmi di grafica.
Prima di tutto, sui siti in cui i contenuti con immagini, molto probabilmente, non verranno ritagliati per adattarsi a un blocco particolare.
Un esempio lampante: blog su WordPress.
Diciamo che vuoi che la copertina del tuo articolo abbia un formato 1:1 (quadrato). Le tue azioni:
Quando visiti il sito, vedrai il risultato che ti aspettavi.
Ma supponiamo di aver dimenticato di ritagliare l'immagine in Photoshop e di aver caricato un'immagine casuale come copertina da Internet, cosa succederà allora?! Esatto, il layout si romperà. E se non hai utilizzato affatto i CSS, un'immagine con risoluzione HD può bloccare completamente l'intera visualizzazione del testo. Pertanto, è importante poter ritagliare le immagini utilizzando gli stili CSS.
Diamo un'occhiata a diverse situazioni di come questo può essere implementato non solo con i CSS, ma anche con SVG.
Proviamo a ritagliare un'immagine posizionata utilizzando background-image. Creiamo un markup HTML
Passiamo allo stile CSS. Aggiungiamo un'immagine tramite background-image , specifichiamo i frame per la nostra immagine, centriamo l'immagine usando background-position e impostiamo background-size :
jpg); sfondo-posizione:centro-centro; background-size:copertina; larghezza: 300px; altezza: 300px; )
Questo è stato il primo e più semplice metodo per ritagliare un'immagine. Ora diamo un'occhiata al secondo esempio.
Supponiamo di avere lo stesso contenitore box all'interno del quale c'è un tag img con un'immagine che ora modelleremo.
Posizioneremo anche la nostra immagine al centro rispetto all'oggetto che creeremo. E usiamo una proprietà usata abbastanza raramente: object-fit .
Box ( position: relative; overflow:hidden; width:300px; height:300px; ) .box img ( position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; object-fit:cover; )
Secondo me questo è il metodo migliore. È l'ideale per i blog se utilizzi immagini per post di proporzioni completamente diverse.
Ulteriori informazioni su HTML e CSS qui:
Possiamo anche creare ritagli per le immagini al momento se le inseriamo negli elementi SVG. Prendiamo un cerchio come esempio. Possiamo creare SVG usando i tag. Crea un tag svg wrapping all'interno del quale ci saranno un tag circle e un tag pattern. Nel tag pattern scriviamo il tag immagine. In esso, specifichiamo l'attributo xlink:href e aggiungiamo un'immagine. Aggiungeremo anche gli attributi di larghezza e altezza. Ma non è tutto. Avremo bisogno di aggiungere un valore di riempimento. Per completare il nostro lavoro, aggiungeremo un attributo ausiliario preserveAspectRatio al tag image, che ci consentirà di riempire la nostra immagine "da e verso" attorno al cerchio.
Non posso chiamare questo metodo generico. Ma può essere utilizzato in casi eccezionali. Ad esempio, se tocchiamo l'argomento di un blog, idealmente un metodo del genere potrebbe inserirsi nell'avatar dell'autore che scrive l'articolo.
Ulteriori informazioni su HTML e CSS qui:
Risultati:
Abbiamo coperto 3 metodi per ritagliare le immagini sui siti Web: utilizzando background-image , utilizzando il tag img e svg relativo al modello con l'incorporamento di bitmap utilizzando il tag image. Se conosci altri metodi per ritagliare un'immagine usando SVG, condividili nei commenti. Non solo per me, ma anche per gli altri, sarà utile conoscerli.
Non dimenticare di porre le tue domande sul layout o sullo sviluppo front-end ai professionisti di FrontendHelp online.
In alcuni casi, il contenuto del blocco viene visualizzato al di fuori dei bordi dell'elemento, sovrapponendolo. Per gestire il comportamento elementi di blocco viene utilizzata la proprietà overflow, che determina come deve essere visualizzato il contenuto che va oltre il blocco.
Usando la proprietà clip, puoi ritagliare un elemento a una data dimensione.
Il contenuto degli elementi del blocco può superare il blocco quando il blocco ha un'altezza e/o una larghezza esplicite. Senza un'altezza, il blocco si allungherà per adattarsi al contenuto, a meno che il blocco non sia impostato su position: absolute; o posizione: fisso; . Il testo può fuoriuscire dal blocco in altezza, le immagini possono fuoriuscire in altezza e larghezza.
| Valori: | |
| visibile | Valore di default. Tutto il contenuto diventa visibile indipendentemente dalla dimensione del blocco contenitore. È possibile sovrapporre i contenuti dei blocchi vicini. |
| scorrere | Aggiunge barre di scorrimento all'interno dell'area di visualizzazione dell'elemento che vengono visualizzate anche quando il contenuto rientra in un blocco. Le dimensioni del contenitore non cambiano. |
| auto | Aggiunge barre di scorrimento solo quando necessario. |
| nascosto | Nasconde il contenuto che va oltre i limiti del blocco. Può nascondere alcuni contenuti. Utilizzato per blocchi contenitore contenenti elementi mobili. Impedisce inoltre la visualizzazione di sfondi o bordi sotto gli elementi flottati (che sono impostati su float: left / right; . Questo non ridimensiona il contenitore. |
Riso. 1. Ritaglio del contenuto del blocco con proprietà di overflow Sintassi: div (larghezza: 200px; altezza: 150px; overflow: nascosto;) La proprietà specifica come verrà tagliato il bordo destro del contenuto all'interno del blocco in caso di overflow.
Sintassi:
Div ( overflow-x: nascosto; )
La proprietà specifica come verrà tagliato il bordo inferiore del contenuto all'interno del blocco in caso di overflow.
Sintassi:
Div ( overflow-y: nascosto; )
La proprietà determina quale parte dell'elemento sarà visibile. La parte dell'elemento che rimane visibile dopo il ritaglio è denominata area di ritaglio. Il ritaglio viene applicato a un elemento inizialmente completamente visibile. La proprietà si applica agli elementi la cui proprietà position è impostata su absolute o fixed .
Vlad Merzhevich
Nonostante il fatto che i monitor diagonali di grandi dimensioni stiano diventando più convenienti e la loro risoluzione sia in costante aumento, a volte è necessario inserire molto testo in uno spazio limitato. Ad esempio, questo potrebbe essere necessario per versione mobile site o per un'interfaccia in cui il numero di righe è importante. IN casi simili ha senso tagliare lunghe righe di testo, lasciando solo l'inizio della frase. Quindi porteremo l'interfaccia a una forma compatta e ridurremo la quantità di informazioni di output. Il taglio della linea stessa può essere eseguito sul lato server utilizzando lo stesso PHP, ma è più semplice tramite CSS e puoi sempre mostrare l'intero testo, ad esempio, quando ci passi sopra con il cursore del mouse. Successivamente, considera i metodi su come tagliare il testo con forbici immaginarie.
Si tratta davvero di utilizzare la proprietà overflow con un valore di hidden . Le differenze risiedono solo nella diversa visualizzazione del nostro testo.
Affinché la proprietà overflow si mostri con il testo in tutto il suo splendore, dobbiamo annullare l'avvolgimento del testo utilizzando uno spazio bianco con un valore di nowrap . Se ciò non viene fatto, non ci sarà alcun effetto di cui abbiamo bisogno, i trattini verranno aggiunti al testo e verrà visualizzato nella sua interezza. L'esempio 1 mostra come tagliare un testo lungo con un insieme specificato di proprietà di stile.
Esempio 1. overflow per il testo
HTML5 CSS3 IE Cr Op Sa Fx
Risultato questo esempio mostrato in fig. 1.
Riso. 1. L'aspetto del testo dopo l'applicazione della proprietà overflow
Come si può vedere dalla figura, c'è solo un inconveniente in generale: non è ovvio che il testo abbia una continuazione, quindi l'utente deve esserne consapevole. Per questo, di solito viene utilizzato un gradiente o un'ellissi.
Per chiarire che il testo sulla destra non finisce, puoi applicare sopra di esso un gradiente da trasparente a colore di sfondo (Fig. 2). Ciò creerà l'effetto della 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, ma il gradiente stesso verrà aggiunto usando lo pseudo-elemento ::after e CSS3. Per fare ciò, inseriamo uno pseudo-elemento vuoto attraverso la proprietà content e applichiamo ad esso un gradiente con prefissi diversi per i principali browser (esempio 2). È facile cambiare la larghezza del gradiente attraverso width , puoi anche regolare il grado di trasparenza sostituendo il valore 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 il polyrange, questa è la verticale di una volta nel tessuto polifonico ultra-polifonico.
Questo metodo non funziona nel browser Internet Explorer fino alla versione 8.0 inclusa, perché non supporta i gradienti. Ma puoi abbandonare CSS3 e creare un gradiente alla vecchia maniera, attraverso un'immagine PNG-24.
Questo metodo è combinato solo con uno sfondo solido e nel caso di immagine di sfondo il gradiente sul testo risalterà.
È inoltre possibile utilizzare un'ellissi al posto di un gradiente 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 aspetto negativo di questa proprietà è il suo stato finora poco chiaro. Questa proprietà sembra essere inclusa in CSS3, ma il codice con essa non supera la convalida.
L'esempio 3 mostra l'uso della proprietà text-overflow con un valore di ellipsis , che aggiunge un'ellissi. Quando si sposta il cursore del mouse sul testo, questo viene visualizzato nella sua interezza ed evidenziato nel colore di sfondo.
Esempio 3: utilizzo dell'overflow del testo
HTML5 CSS3 IE Cr Op Sa Fx
Il risultato di questo esempio è mostrato in Fig. 3.
Riso. 3. Testo con puntini di sospensione
Il grande vantaggio di questi metodi è il fatto che il gradiente e i puntini di sospensione non vengono visualizzati se il testo è breve e rientra interamente nell'area specificata. Quindi il testo verrà visualizzato normalmente quando è completamente visibile sullo schermo e ritagliato quando la larghezza dell'elemento viene ridotta.
