Kako včasih so moteča dolga imena povezav do izdelkov - po tri vrstice - ali dolgi naslovi drugih blokov. Kako super bi bilo, če bi se dalo vse skupaj nekako zožiti, narediti bolj kompaktno. In ko z miško premaknete nad njim, prikaže naslov v celoti.

Pri tem nam bo na pomoč priskočil naš najljubši CSS. Zelo preprosto je, poglejte.

Recimo, da imamo takšen blok iz kataloga izdelkov:

Tukaj je njegova struktura:

Tukaj so njegovi slogi:

Someblock( obroba: 1px polna #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px črtkana; font-size: 16px; font-weight: krepko; margin-bottom: 12px ;)

Strinjam se, izgleda grozno. Seveda lahko ime izdelka skrajšate. Kaj pa, če jih je na stotine ali tisoče? S PHP lahko tudi odrežete del imena in ga omejite na določeno število znakov. Kaj pa, če se postavitev pozneje spremeni in so bloki manjši ali, nasprotno, 2-3 krat večji? Nič od tega ni možnost, nič od tega nam ne ustreza.

In tu nam na pomoč priskoči CSS in njegova čarobna lastnost text-overflow. Vendar ga je treba pravilno uporabljati v povezavi z več drugimi lastnostmi. Spodaj vam bom pokazal že pripravljeno rešitev, nato pa razložil, kaj je kaj.

Torej, če odmislimo ročno urejanje imen izdelkov in programsko obrezovanje slogov, vzamemo CSS v svoje roke in vidimo, kaj dobimo:

Čudežni Yudo večerni dajalec moči, skrivnosten, art. 20255-59

Čudovit izdelek po super ceni, samo 100 rubljev. Polepšala vam bo samotne večere in vam dala naval vitalnosti!

No, je bolje? Po moje zelo! In premaknite miško nad naslov ... voila! Tukaj se nam prikazuje v celoti.

V naši strukturi se ni nič spremenilo, dodal sem samo divo z razredom .glava naslovna oznaka. In tukaj so novi, posodobljeni slogi:

Someblock( obroba: 1px polna #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px črtkana; font-size: 16px; font-weight: krepko; margin-bottom: 12px ; overflow: skrito; text-overflow: elipsa; white-space: nowrap; )

Poglejte, kaj smo naredili:

• Bloku smo dodali nepremičnino presledek: nowrap, ki odstrani zmožnost besedila, da prelije besede nova vrstica, s čimer ga potegnete v vrsto;
• Nato smo dodali nepremičnino overflow: skrito, ki je omejil vidnost naše linije na širino bloka in s tem odrezal vse nepotrebno in ga ni pokazal obiskovalcu;
• No, na koncu smo naši vrstici dodali elipso z uporabo lastnosti text-overflow: elipsa, s čimer je obiskovalec razumel, da to ni konec in da bo verjetno moral dvigniti miško in si ga ogledati v celoti.

Ljubite CSS, naučite se CSS in izdelava spletnih strani se vam ne bo zdela tako težka =)

Marsikdo se je verjetno že srečal s težavo, ko je treba nekaj besedila prikazati v eni vrstici. Poleg tega je lahko besedilo precej dolgo, širina bloka, v katerem se to besedilo nahaja, pa je običajno omejena na vsaj enako velikost okna brskalnika. Za te primere je bila izumljena lastnost text-overflow, ki je bila vključena v priporočilo CSS3 in je bila prvič implementirana v IE6 že zelo dolgo nazaj. Pri uporabi te lastnosti za blok, če je njegovo besedilo širše od samega bloka, je besedilo odrezano in na koncu je postavljena elipsa. Čeprav tukaj ni vse tako preprosto, se bomo k temu vrnili malo kasneje.
Z Internet Explorerjem je vse jasno, kaj pa drugi brskalniki? In čeprav je lastnost text-overflow trenutno izključena iz specifikacije CSS3, jo Safari podpira (v skladu z vsaj, v različici 3), tudi Opera (od različice 9, čeprav se lastnost imenuje -o-overflow-text). Toda Firefox tega ne podpira, ne podpira in tudi v različici 3 ga ne podpira. Žalostno ampak resnično. Mogoče pa se da kaj narediti?

Seveda se da. Ko sem na internetu iskal to lastnost in kako to narediti v Firefoxu, sem naletel preprosta rešitev. Bistvo rešitve:

To je vse. Za podrobnosti preberite članek.
Rešitev ni slaba, vendar obstajajo težave:

1. Besedilo je lahko odrezano na sredini (relativno rečeno) črke in bomo videli njegov "štor".
2. Elipsa je vedno prikazana, tudi če je besedilo manjše od širine bloka (torej ne pade iz njega in elipsa ni potrebna).

Prvi korak

Najprej se osredotočimo na drugo težavo, in sicer kako se izogniti prikazu elipse, ko ni potrebna. Ko sem premleval možgane in "malo" eksperimentiral, sem našel rešitev. Poskušal bom razložiti.
Bistvo je, da potrebujemo ločen blok z elipso, ki se bo pojavil le, ko bo besedilo zavzelo preveč prostora v širino. Potem sem prišel na idejo o padajočem plavajočem bloku. Čeprav se sliši strašljivo, to le pomeni blok, ki je vedno tam in pritisnjen na desno, ko pa širina besedila postane velika, besedilo potisne blok v naslednjo vrstico.
Pojdimo k praksi, sicer je težko razložiti. Postavimo Struktura HTML:

zelo dolgo besedilo

Ni zelo kompakten, vendar nisem mogel narediti nič manjšega. Torej imamo vsebniški blok DIV.ellipsis, blok z našim besedilom in še en blok, ki bo vseboval elipso. Upoštevajte, da je "blok elipse" pravzaprav prazen, ker pri kopiranju besedila ne potrebujemo dodatnih treh pik. Prav tako naj vas ne skrbi pomanjkanje dodatnih razredov, saj je ta struktura dobro obravnavana z uporabo izbirnikov CSS. In tukaj je sam CSS:

.ellipsis (overflow: skrito; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px solid red;) .ellipsis > DIV:first-child (float: left;) .ellipsis > DIV + DIV ( float: desno; margin-top: -1,2em; ).elipsa >

To je vse. Preverimo in poskrbimo, da deluje, kot je predvideno v Firefoxu, Operi, Safariju. V IE je zelo čuden, a predvidljiv rezultat. V IE6 je vse izginilo, v IE7 pa preprosto ne deluje, saj ne podpira ustvarjene vsebine. Toda k IE se bomo vrnili kasneje.

Za zdaj pa poglejmo, kaj smo naredili. Najprej nastavimo višino vrstice in višino glavnega bloka, saj moramo poznati višino bloka in višino vrstice besedila. Enako vrednost nastavimo za vrh roba bloka z elipso, vendar z negativno vrednostjo. Tako bo blok, ko ni “ponastavljen” na naslednjo vrstico, nad besedilno vrstico (ena vrstica), ko bo ponastavljen, bo na svojem nivoju (pravzaprav je nižje, samo potegnemo ga). ena vrstica). Da skrijemo nepotrebne stvari, še posebej, ko ni treba prikazati elipse, naredimo overflow: hidden za glavni blok, tako da, ko je elipsa nad črto, ne bo prikazana. To nam omogoča tudi, da odstranimo besedilo, ki pade izven bloka (na desni rob). Da preprečimo, da bi se besedilo nepričakovano ovijalo in potiskalo blok z elipso vse nižje, naredimo presledek: nowrap in s tem prepovemo vezaje - naše besedilo bo vedno v eni vrstici. Za blok z besedilom nastavimo float:levo, da ne strne takoj bloka z elipso in zavzame minimalno širino. Ker sta znotraj glavnega bloka (DIV.ellipsis) oba bloka lebdeča (float: levo/desno), se bo glavni blok strnil, ko bo besedilni blok prazen, zato smo za glavni blok nastavili fiksno višino (višina: 1,2 em) . In nazadnje, uporabimo psevdoelement ::after za prikaz elipse. Za ta psevdoelement smo nastavili tudi ozadje, ki bo prekrilo besedilo, ki se bo pojavilo pod njim. Za glavni blok postavimo okvir samo zato, da vidimo dimenzije bloka, kasneje ga bomo odstranili.
Če bi Firefox podpiral psevdoelemente ter Opera in Safari v smislu njihovega pozicioniranja (nastavitev položaja/lebdenja itd. zanje), potem bi bilo mogoče, da ne bi uporabili ločenega bloka za elipso. Poskusite zamenjati zadnja 3 pravila z naslednjim:

.ellipsis > DIV:first-child::after ( float: desno; content: "..."; margin-top: -1.2em; background-color: white; position: relative; )

v Operi in Safariju vse deluje kot prej in brez dodatnega bloka elipse. Toda Firefox je razočaranje. Toda zanj se odločamo mi. No, morali se boste zadovoljiti z izvirno strukturo HTML.

Drugi korak

Kot ste morda opazili, smo se znebili težave s pojavom elips, ko se besedilo prilega bloku. Imamo pa še eno težavo - besedilo je na sredini črk odrezano. In poleg tega ne deluje v IE. Če želite premagati oboje, morate uporabiti izvorno pravilo prelivanja besedila za brskalnike in samo za Firefox uporabiti zgoraj opisano rešitev (ni druge možnosti). Pozneje bomo ugotovili, kako narediti rešitev »samo za Firefox«, zdaj pa poskusimo, da to, kar imamo, deluje s pomočjo prelivanja besedila. Prilagodimo CSS:

.ellipsis (prelivanje: skrito; presledek: nowrap; višina vrstice: 1,2 em; višina: 1,2 em; obroba: 1px polna rdeča; text-overflow: elipsa; -o-text-overflow: elipsa; širina: 100 %; } .ellipsis * (prikaz: v vrstici; ) /*.ellipsis > DIV:prvi otrok ( float: levo; ) .ellipsis > DIV + DIV ( float: desno; margin-top: -1,2em; ) .ellipsis > DIV + DIV::after ( barva ozadja: bela; vsebina: "..."; ) */

Kot se je izkazalo, ni veliko za urejati. Glavnemu slogu bloka so bile dodane tri vrstice. Dva od njih vključujeta text-overflow. telovadba širina širina: 100 % je potrebno za IE, da besedilo ne razširi bloka v neskončnost in lastnost text-overflow deluje; V bistvu smo omejili širino. V teoriji se DIV, tako kot vsi blokovni elementi, razteza čez celotno širino vsebnika, širina: 100% pa je neuporabna in celo škodljiva, IE pa ima težave s postavitvijo, saj se vsebnik vedno raztegne, da ustreza vsebini, torej ni druge poti. Prav tako smo naredili vse notranje elemente inline, ker za nekatere brskalnike (Safari & Opera) text-overflow drugače ne bo deloval, ker so notri blokovni elementi. Zadnja tri pravila smo komentirali, saj v tem primeru niso potrebna in kršijo vse (konflikt). Ta pravila bodo potrebna samo za Firefox.
Poglejmo, kaj imamo, in nadaljujmo.

Tretji korak

Ko sem še enkrat pogledal stran (preden sem nameraval napisati ta članek), omenjeno na samem začetku, sem takrat iz radovednosti pobrskal po komentarjih za pametne sorodne ideje. In našel sem ga v komentarju, ki je govoril o drugi rešitvi, ki deluje v Firefoxu in IE (za to osebo, kot za avtorja prvega članka, očitno ni drugih brskalnikov). Avtor se torej v tej rešitvi tega pojava (odsotnosti text-overflow-a) loti na nekoliko drugačen način, saj na elemente, pri katerih je bilo treba po potrebi postaviti elipso, pripenja handlerje za dogodke overflow in underflow. Ni slabo, vendar se mi zdi, da je ta rešitev zelo draga (sredstveno), še posebej, ker je nekoliko glihljiva. Vendar je med ugotavljanjem, kako je to dosegel, naletel na zanimivost, namreč Lastnosti CSS o -moz-vezava. Kolikor razumem, je to analog vedenja v IE, le z drugačno omako in hladilnikom. Vendar se ne bomo spuščali v podrobnosti, povejmo le, da lahko na ta način elementu pripnete upravljalnik JavaScript z z uporabo CSS. Sliši se čudno, vendar deluje. Kaj počnemo:

.ellipsis (overflow: skrito; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px polno rdeče; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100% ; -moz-vezovanje: url(moz_fix.xml#elipsa); povečava: 1;) .elipsa * ( prikaz: v vrstici; ) .moz-elipsa > DIV:prvi otrok(float: levo; zaslon: blok; } .moz-elipsa > DIV + DIV( float: desno; margin-top: -1,2em; zaslon: blok; } .moz-elipsa > DIV + DIV::after(barva ozadja: bela; vsebina: "..."; )

Kot lahko vidite, spet nismo naredili veliko sprememb. Na tem koraku v IE7 je čudna napaka, vse je poševno, če ne nastavite povečave: 1 za glavni blok (najenostavnejša možnost). Če odstranite (izbrišete, komentirate) pravilo .ellipsis * ali .moz-ellipsis > DIV + DIV (kar sploh ne vpliva na IE7), potem napaka izgine. Vse to je čudno, če kdo ve, kaj je narobe, naj sporoči. Za zdaj se bomo zadovoljili z zoom: 1 in prešli na Firefox.
Lastnost -moz-binding vključuje datoteko moz_fix.xml z navodilom z identifikatorjem elipsa. Vsebina tega xml datoteko naslednje:

Vse, kar ta konstruktor naredi, je dodajanje razreda moz-ellipsis elementu, za katerega je delal izbirnik. To bo delovalo samo v Firefoxu (brskalniki gecko?), tako da bo samo v njem razred moz-ellipsis dodan elementom in lahko dodamo dodatna pravila. To so hoteli. Nisem povsem prepričan o potrebi po this.style.mozBinding = “”, a glede na izkušnje z izražanjem je bolje, da smo na varni strani (na splošno nisem dobro seznanjen s to stranjo Firefoxa, zato Lahko se motim).
Morda vas skrbi, da ta tehnika uporablja zunanjo datoteko in JavaScript na splošno. Ni se treba bati. Prvič, če se datoteka ne naloži in/ali je JavaScript onemogočen in ne deluje, je v redu, uporabnik preprosto ne bo videl elipse na koncu, besedilo bo na koncu bloka odrezano. To pomeni, da v tem primeru dobimo "nevsiljivo" rešitev. Lahko se prepričate sami.

Tako smo dobili slog za brskalnike »Big Four«, ki izvaja prelivanje besedila za Opera, Safari in IE ter ga posnema za Firefox, ne zelo dobro, vendar je bolje kot nič.

Četrti korak

Temu bi lahko naredili konec, vendar bi radi našo rešitev nekoliko izboljšali. Ker lahko kateremu koli bloku pritrdimo konstruktor in s tem pridobimo nadzor nad njim, zakaj ne bi tega izkoristili. Poenostavimo našo strukturo:

zelo dolgo besedilo

Oh ja! Mislim, da se boste strinjali z mano - to je tisto, kar potrebujete!
Zdaj pa odstranimo vse nepotrebne stvari iz sloga:

.ellipsis (overflow: skrito; white-space: nowrap; line-height: 1.2em; height: 1.2em; text-overflow: ellipsis; -o-text-overflow: ellipsis; width: 100 %; -moz-binding: url(moz_fix.xml#ellipsis); ) .moz-ellipsis > DIV:first-child ( float: levo; ) .moz-ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; ) .moz -elipsa > DIV + DIV::after (barva-ozadje: bela; vsebina: "..."; )

Končno smo odstranili rdečo obrobo :)
Zdaj pa dodajmo nekaj v naš moz_fix.xml:

Kaj se tukaj dogaja? Ponovno ustvarjamo našo začetno strukturo HTML. To pomeni, da se te težave z bloki izvajajo samodejno in samo v Firefoxu. Koda JavaScript je napisana v najboljših tradicijah :)
Na žalost se ne moremo izogniti situaciji, ko je besedilo odrezano na sredini črke (čeprav morda začasno, ker je moja rešitev še zelo surova in bo morda delovala v prihodnosti). Toda ta učinek lahko nekoliko zgladimo. Za to potrebujemo sliko (belo ozadje s prozornim prelivom) in nekaj sprememb sloga:

.moz-elipsa > DIV:prvi otrok ( float: levo; desni rob: -26px;) .moz-elipsa > DIV + DIV ( float: desno; margin-top: -1,2em; ozadje: url(ellipsis.png) repeat-y; oblazinjenje-levo: 26px; }

Poglejmo in uživajmo življenje.

Naredimo temu konec.

Zaključek

Dal vam bom majhen primer za postavitev tretjih oseb. Vzel sem kazalo vsebine ene od strani Wikipedije (prve, ki se je pojavila) in zanj uporabil zgoraj opisano metodo.
Na splošno ta odločitev univerzalno lahko imenujemo le z nategom. Vse je odvisno od vaše postavitve in njene kompleksnosti. Morda boste potrebovali datoteko ali morda tamburin. Čeprav v večini primerov mislim, da bo delovalo. In potem, zdaj imate izhodišče ;)
Upam, da ste se iz članka naučili kaj zanimivega in koristnega;) Učite se, eksperimentirajte, delite.
Vso srečo!

Obstaja besedilo poljubne dolžine, ki ga je treba prikazati znotraj bloka s fiksno višino in širino. V tem primeru, če se besedilo ne prilega popolnoma, je treba prikazati del besedila, ki se popolnoma prilega danemu bloku, za katerim se nastavi elipsa.

Ta naloga je precej pogosta, a hkrati ni tako trivialna, kot se zdi.

Možnost enovrstičnega besedila v CSS

V tem primeru lahko uporabite lastnost text-overflow: ellipsis. V tem primeru mora vsebnik imeti lastnost preliv enaka skrit oz posnetek

Blok (širina: 250 slikovnih pik; presledek: nowrap; overflow: skrito; text-overflow: elipsa;)

Možnost večvrstičnega besedila v CSS

Prvi način za obrezovanje večvrstičnega besedila je z z uporabo CSS lastnosti uporabljajo psevdoelemente :prej in :po. Začnimo z oznako HTML

In zdaj same lastnosti

Box (overflow: skrito; višina: 200px; širina: 300px; line-height: 25px;) .box:before (vsebina: ""; float: levo; širina: 5px; višina: 200px;) .box > *:first -child (float: desno; širina: 100%; margin-left: -5px;) .box:after (vsebina: "\02026"; box-sizing: content-box; float: desno; položaj: relativno; top: -25px; levo: 100%; širina: 3em; rob-levo: -3em; oblazinjenje-desno: 5px; poravnava besedila: desno; velikost ozadja: 100% 100%; ozadje: linearni gradient (na desno, rgba (255 , 255 , 255 , 0 ), bela 50 % , bela ); )

Drugi način je uporaba lastnosti column-width, s katero nastavimo širino stolpca za večvrstično besedilo. Vendar pri uporabi te metode na koncu ne bo mogoče nastaviti elipse. HTML:

Blok (overflow: skrito; višina: 200 slikovnih pik; širina: 300 slikovnih pik;) .block__inner (-webkit-column-width: 150 slikovnih pik; -moz-column-width: 150 slikovnih pik; širina stolpca: 150 slikovnih pik; višina: 100 %; )

Obstaja še tretji način za reševanje večvrstičnega besedila z uporabo CSS za brskalnike Webkit. V njem bomo morali uporabiti več specifičnih lastnosti s predpono -webkit. Glavni je -webkit-line-clamp, ki vam omogoča, da določite število vrstic, ki bodo izhodne v bloku. Rešitev je lepa, vendar precej omejena zaradi delovanja v omejeni skupini brskalnikov

Blok (overflow: skrito; text-overflow: elipsa; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: navpično;)

Možnost večvrstičnega besedila v JavaScriptu

Tu se uporablja dodaten nevidni blok, v katerega je prvotno postavljeno naše besedilo, nato pa se odstranjuje en znak naenkrat, dokler višina tega bloka ne postane manjša ali enaka višini želeni blok. In na koncu se besedilo premakne v izvirni blok.

var blok = dokument. querySelector(".block"), besedilo = blok. notranjiHTML, klon = dokument. createElement("div"); klon stil. položaj = "absolutno"; klon stil. vidnost = "skrito" ; klon stil. širina = blok. clientWidth + "px" ; klon notranjiHTML = besedilo; dokument. telo. appendChild(klon); var l = besedilo. dolžina - 1; for (; l >= 0 && clone. clientHeight > block. clientHeight; -- l) (klon. innerHTML = text. substring (0, l) + "...";) block. notranjiHTML = klon. notranjiHTML ;

To je enako kot vtičnik za jQuery:

(funkcija ($) ( var truncate = funkcija (el) ( var besedilo = el . besedilo (), višina = el . višina (), klon = el . klon (); klon . css (( položaj : "absolutno" , vidnost : "skrito", višina : "samodejno" )); el . za (klon); var l = besedilo . dolžina - 1 ; za (; l >= 0 && klon . višina () > višina ; -- l ) ( klon . besedilo ( besedilo . podniz ( 0 , l ) + "..." ); ) el . besedilo ( klon . besedilo ()); klon . odstrani (); ); $ . fn . truncateText = funkcija () ( return this . each (function () ( truncate ($ (this )); )); ) (jQuery ));

Določa parametre vidnosti besedila v bloku, če se celotno besedilo ne prilega podanemu območju. Obstajata dve možnosti: besedilo je odrezano; besedilo je odrezano in na koncu vrstice je dodana elipsa. text-overflow deluje, če je lastnost overflow bloka nastavljena na auto , scroll ali hidden .

kratke informacije

Poimenovanja

	Opis	Primer
<тип>	Označuje vrsto vrednosti.	<размер>
A && B	Vrednosti morajo biti izpisane v navedenem vrstnem redu.	<размер> && <цвет>
A | B	Označuje, da morate izbrati samo eno vrednost od predlaganih (A ali B).	normalno | majhne velike črke
A || B	Vsako vrednost je mogoče uporabiti samostojno ali skupaj z drugimi v poljubnem vrstnem redu.	širina || štetje
	Vrednote skupin.	[ obrezovanje || križ ]
*	Ponovite nič ali večkrat.	[,<время>]*
+	Ponovite enkrat ali večkrat.	<число>+
?	Podan tip, beseda ali skupina ni obvezna.	vložek?
(A, B)	Ponovite vsaj A, vendar ne več kot B-krat.	<радиус>{1,4}
#	Ponovite enkrat ali večkrat, ločeno z vejicami.	<время>#

×

Vrednote

posnetek Besedilo je odrezano, da se prilega območju. elipsa Besedilo je okrnjeno in na koncu vrstice je dodana elipsa.

Primer

Magnetno polje zanemarljivo duši veliki krog nebesne sfere, pri čemer se ekscentričnosti in nakloni orbit povečajo.

Rezultat ta primer prikazano na sl. 1.

riž. 1. Elipsa na koncu besedila

Objektni model

Predmet.style.textOverflow

Opomba

Opera pred različico 11 uporablja lastnost -o-text-overflow.

Specifikacija

Vsaka specifikacija gre skozi več stopenj odobritve.

• Priporočilo – specifikacijo je odobril W3C in je priporočena kot standard.
• Priporočilo kandidata ( Možno priporočilo) - skupina, odgovorna za standard, je zadovoljna, da izpolnjuje svoje cilje, vendar potrebuje pomoč razvojne skupnosti za implementacijo standarda.
• Predlagano priporočilo Predlagano priporočilo) - na tej stopnji je dokument predložen svetovalnemu svetu W3C v končno odobritev.
• Delovni osnutek – bolj zrela različica osnutka, o katerem so razpravljali in ga spremenili za pregled skupnosti.
• Uredniški osnutek ( Uredniški osnutek) - osnutek različice standarda po spremembah s strani urednikov projekta.
• Osnutek ( Osnutek specifikacije) - prvi osnutek standarda.

×