Orezanie jednoriadkového alebo viacriadkového textu podľa výšky s pridaním elipsy. Tri bodky na konci riadku pomocou CSS Css tri bodky na konci

Ako niekedy otravujú dlhé názvy odkazov na produkty – každý tri riadky – alebo dlhé nadpisy iných blokov. Aké by to bolo skvelé, keby sa to celé dalo nejako zúžiť, urobiť kompaktnejším. A keď naň prejdete myšou, zobrazí sa celý názov.

Na to nám príde na pomoc náš obľúbený CSS. Je to veľmi jednoduché, pozri.

Povedzme, že máme takýto blok z katalógu produktov:

Tu je jeho štruktúra:

Zázračný Yudo večerný darca sily, tajomný, umenie. 20255-59

Nádherný produkt za super cenu, len 100 rubľov. Rozžiari vaše osamelé večery a dodá vám príval vitality!

Tu sú jeho štýly:

Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px dashed; font-size: 16px; font-weight: bold; margin-bottom: 12px ;)

Súhlasím, vyzerá to hrozne. Názov produktu si samozrejme môžete skrátiť. Ale čo ak sú ich stovky či tisíce? Môžete tiež použiť PHP na orezanie časti názvu a obmedziť ho na určitý počet znakov. Čo však v prípade, ak sa dispozícia neskôr zmení a bloky budú menšie alebo naopak 2-3x väčšie? Nič z toho nie je možnosť, nič z toho nám nevyhovuje.

A tu nám prichádza na pomoc CSS a jeho magická vlastnosť text-overflow. Ale treba ho správne používať v spojení s niekoľkými ďalšími vlastnosťami. Nižšie vám ukážem hotové riešenie, po ktorom vysvetlím, čo je čo.

Ak teda odložíme ručné úpravy názvov produktov a programové orezávanie štýlov, vezmeme do rúk CSS a uvidíme, čo získame:

Zázračný Yudo večerný darca sily, tajomný, umenie. 20255-59

Nádherný produkt za super cenu, len 100 rubľov. Rozžiari vaše osamelé večery a dodá vám príval vitality!

No, je to lepšie? Podľa mňa veľmi! A presuňte myš nad názov... voila! Tu sa nám to ukazuje v plnom znení.

V našej štruktúre sa nič nezmenilo, len som pridal divu s triedou .hlavička názov značky. A tu sú nové, aktualizované štýly:

Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px dashed; font-size: 16px; font-weight: bold; margin-bottom: 12px ; pretečenie: skryté; pretečenie textu: elipsa; medzera: nowrap; )

Pozrite sa, čo sme urobili:

  • Do bloku sme pridali nehnuteľnosť white-space: nowrap, čo odstraňuje schopnosť textu zalamovať slová Nový riadok, čím ho vtiahne do radu;
  • Potom sme pridali nehnuteľnosť prepad: skrytý, ktorý obmedzil viditeľnosť našej línie na šírku bloku, čím odrezal všetko nepotrebné a neukázal to návštevníkovi;
  • No a na konci sme pridali elipsu do nášho riadku pomocou vlastnosti text-overflow: elipsa, čím umožníte návštevníkovi pochopiť, že toto nie je koniec radu a že pravdepodobne bude musieť zdvihnúť myš a pozrieť sa na to naplno.

Milujte CSS, naučte sa CSS a vytváranie webových stránok vám nebude pripadať také ťažké =)


Mnoho ľudí sa pravdepodobne stretlo s problémom, keď je potrebné zobraziť nejaký text na jednom riadku. Okrem toho môže byť text pomerne dlhý a šírka bloku, v ktorom sa tento text nachádza, je zvyčajne obmedzená aspoň na rovnakú veľkosť okna prehliadača. Pre tieto prípady bola vynájdená vlastnosť text-overflow, ktorá bola zahrnutá v odporúčaní CSS3 a bola prvýkrát implementovaná v IE6, veľmi dávno. Pri použití tejto vlastnosti pre blok, ak je jeho text širší ako samotný blok, text sa odreže a na koniec sa umiestni elipsa. Aj keď tu nie je všetko také jednoduché, vrátime sa k tomu trochu neskôr.
S Internet Explorerom je všetko jasné, čo ostatné prehliadače? A hoci je vlastnosť text-overflow momentálne vyňatá zo špecifikácie CSS3, Safari ju podporuje (podľa najmenej, vo verzii 3), Opera tiež (od verzie 9, aj keď vlastnosť sa nazýva -o-overflow-text). Firefox však nie, nepodporuje ho a dokonca ani vo verzii 3 nebude. Smutné ale pravdivé. Ale možno sa dá niečo urobiť?

Samozrejme, že sa to dá. Keď som hľadal na internete túto vlastnosť a ako to urobiť vo Firefoxe, narazil som jednoduché riešenie. Podstata riešenia:

To je všetko. Podrobnosti si prečítajte v článku.
Riešenie nie je zlé, ale existujú problémy:

  1. Text môže byť v strede (relatívne povedané) listu odrezaný a uvidíme jeho „pahýľ“.
  2. Elipsa sa zobrazuje vždy, aj keď je text menší ako šírka bloku (čiže z neho nevypadne a elipsa nie je potrebná).

Krok jedna

Najprv sa zamerajme na druhý problém, a to ako sa vyhnúť zobrazovaniu elipsy, keď to nie je potrebné. Potom, čo som si polámal hlavu a „trochu experimentoval“, našiel som riešenie. Pokúsim sa vysvetliť.
Ide o to, že potrebujeme samostatný blok s elipsou, ktorá sa objaví len vtedy, keď text na šírku zaberie príliš veľa miesta. Potom som prišiel s nápadom padajúceho plávajúceho bloku. Aj keď to znie strašidelne, znamená to len blok, ktorý je vždy prítomný a stlačený doprava, ale keď sa šírka textu zväčší, text posunie blok na ďalší riadok.
Prejdime k praxi, inak sa to ťažko vysvetľuje. Poďme nastaviť HTML štruktúra:

veľmi dlhý text

Nie je príliš kompaktný, ale nemohol som urobiť nič menšie. Takže máme kontajnerový blok DIV.ellipsis, blok s naším textom a ďalší blok, ktorý bude obsahovať elipsu. Všimnite si, že „blok elipsy“ je v skutočnosti prázdny, pretože pri kopírovaní textu nepotrebujeme ďalšie tri bodky. Tiež sa nezľaknite nedostatku ďalších tried, pretože táto štruktúra je dobre riešená pomocou selektorov CSS. A tu je samotný CSS:
.ellipsis ( overflow: hidden; white-space: nowrap; line-height: 1.2em; height: 1.2em; border: 1px full red; ) .ellipsis > DIV:first-child (float: left; ) .ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; ).elipsa >

To je všetko. Skontrolujeme a ubezpečíme sa, že funguje tak, ako má vo Firefoxe, Opera, Safari. V IE je veľmi zvláštny, ale predvídateľný výsledok. V IE6 je všetko preč, ale v IE7 to jednoducho nefunguje, pretože nepodporuje generovaný obsah. Ale k IE sa vrátime neskôr.

Zatiaľ sa pozrime na to, čo sme urobili. Najprv nastavíme výšku riadku a výšku hlavného bloku, pretože potrebujeme poznať výšku bloku a výšku riadku textu. Rovnakú hodnotu nastavíme pre okrajový vrch bloku s elipsou, ale so zápornou hodnotou. Teda, keď sa blok „neresetuje“ na ďalší riadok, bude nad textovým riadkom (jeden riadok), pri resetovaní bude na svojej úrovni (v skutočnosti je nižší, len ho potiahneme o jeden riadok vyššie). Ak chcete skryť nepotrebné veci, najmä keď nie je potrebné zobraziť elipsu, urobíme pretečenie: skryté pre hlavný blok, takže keď je elipsa nad čiarou, nebude zobrazená. To nám tiež umožňuje odstrániť text, ktorý spadá mimo bloku (na pravý okraj). Aby sa text neočakávane zalomil a netlačil blok s elipsou nižšie a nižšie, vytvoríme white-space: nowrap, čím zakážeme pomlčky – náš text bude vždy na jednom riadku. Pre blok s textom nastavíme float: left, aby hneď nezbalil blok s elipsou a zabral minimálnu šírku. Keďže vo vnútri hlavného bloku (DIV.ellipsis) sú oba bloky plávajúce (plávajúce: vľavo/vpravo), hlavný blok sa zrúti, keď je textový blok prázdny, takže pre hlavný blok nastavíme pevnú výšku (výška: 1,2 em) . A nakoniec použijeme pseudoprvok ::after na zobrazenie elipsy. Pre tento pseudoprvok sme nastavili aj pozadie, ktoré prekryje text, ktorý sa pod ním objaví. Nastavíme rám pre hlavný blok, aby sme videli rozmery bloku, neskôr ho odstránime.
Ak by Firefox podporoval pseudoprvky, ako aj Opera a Safari, pokiaľ ide o ich umiestnenie (nastavenie pozície/plávania atď.), potom by bolo možné nepoužívať samostatný blok pre elipsu. Skúste nahradiť posledné 3 pravidlá nasledujúcimi:

.ellipsis > DIV:first-child::after ( float: right; content: "..."; margin-top: -1.2em; background-color: white; position: relatívna; )

v Opere a Safari všetko funguje ako predtým a bez dodatočného bloku elipsy. Firefox je však sklamaním. Ale rozhodujeme sa za neho. No, budete si musieť vystačiť s pôvodnou štruktúrou HTML.

Krok dva

Ako ste si mohli všimnúť, zbavili sme sa problému s elipsami, ktoré sa objavujú, keď sa text zmestí do bloku. Máme tu však ešte jeden problém – text je orezaný v strede písmen. A okrem toho to nejde v IE. Ak chcete prekonať oboje, musíte použiť natívne pravidlo pretečenia textu pre prehliadače a iba pre Firefox použite riešenie opísané vyššie (neexistuje žiadna alternatíva). Neskôr prídeme na to, ako vytvoriť riešenie „iba pre Firefox“, ale teraz sa pokúsme, aby to, čo máme, fungovalo pomocou pretečenia textu. Poďme vyladiť CSS:

.elipsa ( pretečenie: skryté; medzera: nowrap; výška riadku: 1,2 em; výška: 1,2 em; okraj: 1px plná červená; text-overflow: elipsa; -o-text-overflow: elipsa; šírka: 100 %; } .ellipsis * ( display: inline; ) /*.ellipsis > DIV:first-child ( float: left; ) .ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; ) .ellipsis > DIV + DIV::after ( background-color: white; obsah: "..." ;) */

Ako sa ukázalo, nie je veľmi čo upravovať. Do štýlu hlavného bloku boli pridané tri riadky. Dve z nich zahŕňajú pretečenie textu. Cvičenie šírka šírka: 100% potrebné pre IE, aby text nerozširoval blok do nekonečna a fungovala vlastnosť text-overflow; v podstate sme obmedzili šírku. Teoreticky sa DIV, rovnako ako všetky blokové prvky, tiahne po celej šírke kontajnera a šírka: 100% je zbytočná, ba dokonca škodlivá, ale IE má problém s rozložením, keďže kontajner sa vždy natiahne tak, aby sa zmestil na obsah, takže iná cesta neexistuje. Všetky interné prvky sme tiež vložili do riadku, pretože pre niektoré prehliadače (Safari a Opera) pretečenie textu nebude fungovať inak, pretože vo vnútri sú blokové prvky. Posledné tri pravidlá sme okomentovali, keďže v tomto prípade nie sú potrebné a porušujú všetko (konflikt). Tieto pravidlá budú potrebné iba pre Firefox.
Pozrime sa, čo máme a pokračujeme.

Krok tri

Keď som sa ešte raz pozrel na stránku (ešte predtým, ako som sa chystal napísať tento článok), spomenutú na úplnom začiatku, zo zvedavosti som si v komentároch prezrel inteligentné nápady. A našiel som to v komentári, ktorý hovoril o inom riešení, ktoré funguje vo Firefoxe a IE (pre túto osobu, ako pre autora prvého článku, zrejme neexistujú žiadne iné prehliadače). V tomto riešení sa teda autor s týmto javom (neprítomnosť pretečenia textu) vysporiadava trochu inak, pričom k udalostiam pretečenia a podtečenia pripája handlery k prvkom, pre ktoré bolo potrebné v prípade potreby vložiť elipsu. Nie je to zlé, ale zdá sa mi, že toto riešenie je veľmi drahé (z hľadiska zdrojov), najmä preto, že je trochu chybné. Pri zisťovaní, ako to dosiahol, však narazil na zaujímavú vec, a to CSS vlastnosti o -moz-väzba. Pokiaľ som pochopil, toto je analógia správania v IE, len s inou omáčkou a chladičom. Nebudeme však zachádzať do podrobností, povedzme, že týmto spôsobom môžete pripojiť obslužný program JavaScript k prvku s pomocou CSS. Znie to zvláštne, ale funguje to. Čo robíme:

.ellipsis ( pretečenie: skryté; medzera: nowrap; výška riadku: 1,2 em; výška: 1,2 em; okraj: 1px plná červená; pretečenie textu: elipsa; -o-pretečenie textu: elipsa; šírka: 100 % ; -moz-binding: url(moz_fix.xml#ellipsis); priblíženie: 1;) .elipsa * ( zobrazenie: inline; ) .moz-elipsa > DIV:prvé dieťa( plavák: vľavo; displej: blok; } .moz-elipsa > DIV + DIV( float: right; margin-top: -1,2em; displej: blok; } .moz-ellipsis > DIV + DIV::after(farba pozadia: biela; obsah: "..."; )

Ako vidíte, opäť sme neurobili veľa zmien. V tomto kroku v IE7 je zvláštna chyba, všetko je skreslené, ak nenastavíte priblíženie: 1 pre hlavný blok (najjednoduchšia možnosť). Ak odstránite (vymažete, zakomentujete) pravidlo .ellipsis * alebo .moz-ellipsis > DIV + DIV (čo vôbec neovplyvňuje IE7), potom chyba zmizne. Je to celé zvláštne, ak niekto vie, čo sa deje, dajte mi vedieť. Zatiaľ si vystačíme so zoomom: 1 a prejdeme na Firefox.
Vlastnosť -moz-binding obsahuje súbor moz_fix.xml s inštrukciou s elipsou identifikátora. Obsah tohto xml súbor nasledujúce:

Všetko, čo tento konštruktor robí, je pridať triedu moz-ellipsis do prvku, pre ktorý selektor pracoval. Toto bude fungovať iba vo Firefoxe (prehliadače gecko?), takže iba v ňom sa k prvkom pridá trieda moz-ellipsis a pre túto triedu môžeme pridať dodatočné pravidlá. To je to, čo chceli. Nie som si úplne istý potrebou this.style.mozBinding = “”, ale zo skúseností s vyjadrovaním je lepšie byť na bezpečnej strane (vo všeobecnosti túto stránku Firefoxu veľmi nepoznám, takže môžem sa mýliť).
Možno vás znepokojí, že táto technika používa externý súbor a JavaScript vo všeobecnosti. Netreba sa toho báť. Po prvé, ak sa súbor nenačíta a/alebo JavaScript je zakázaný a nefunguje, je to v poriadku, používateľ jednoducho neuvidí elipsu na konci, text bude orezaný na konci bloku. To znamená, že v tomto prípade dostaneme „nenápadné“ riešenie. Môžete sa o tom presvedčiť sami.

Takto sme dostali štýl pre prehliadače „Big Four“, ktorý implementuje pretečenie textu pre Opera, Safari a IE a emuluje ho pre Firefox, nie veľmi dobre, ale je to lepšie ako nič.

Krok štyri

Tento bod by sme mohli ukončiť, ale chceli by sme naše riešenie trochu vylepšiť. Keďže môžeme pripojiť konštruktor k akémukoľvek bloku a získať nad ním kontrolu, prečo to nevyužiť. Zjednodušme našu štruktúru:

veľmi dlhý text

Ó áno! Myslím, že so mnou budete súhlasiť - to je to, čo potrebujete!
Teraz odstránime všetky nepotrebné veci zo štýlu:
.ellipsis ( pretečenie: skryté; medzera: nowrap; výška riadku: 1,2 em; výška: 1,2 em; pretečenie textu: elipsa; -o-pretečenie textu: elipsa; šírka: 100 %; -moz-väzba: url(moz_fix.xml#ellipsis); ) .moz-ellipsis > DIV:first-child ( float: left; ) .moz-ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; ) .moz -elipsa > DIV + DIV::po (farba pozadia: biela; obsah: "..."; )

Konečne sme odstránili červený okraj :)
Teraz trochu pridajte do nášho súboru moz_fix.xml:

Čo sa tu deje? Obnovujeme našu pôvodnú štruktúru HTML. To znamená, že tieto ťažkosti s blokmi sa robia automaticky a iba vo Firefoxe. JavaScript kód je napísaný podľa najlepších tradícií :)
Žiaľ, nemôžeme sa vyhnúť situácii, keď je text v strede listu orezaný (aj keď, možno dočasne, keďže moje riešenie je stále veľmi hrubé a v budúcnosti môže fungovať). Ale môžeme tento efekt trochu vyhladiť. Na to potrebujeme obrázok (biele pozadie s priehľadným prechodom) a niekoľko zmien štýlu:
.moz-ellipsis > DIV:prvé dieťa ( float: left; pravý okraj: -26px;) .moz-ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; pozadie: url(elipsa.png) repeat-y; padding-left: 26px; }

Pozrime sa a užívajme si život.

Urobme tomu koniec.

Záver

Dám vám malý príklad rozloženia tretej strany. Vzal som obsah jednej zo stránok Wikipédie (prvá, ktorá sa objavila) a použil som na ňu vyššie opísanú metódu.
Všeobecne toto rozhodnutie možno nazvať univerzálnym iba s úsekom. Všetko závisí od vášho usporiadania a jeho zložitosti. Možno budete potrebovať pilník alebo možno tamburínu. Aj keď vo väčšine prípadov si myslím, že to bude fungovať. A potom, teraz máte východiskový bod ;)
Dúfam, že ste sa z článku dozvedeli niečo zaujímavé a užitočné;) Učte sa, experimentujte, zdieľajte.
Veľa štastia!

V bloku s pevnou výškou a šírkou je potrebné zobraziť text ľubovoľnej dĺžky. V tomto prípade, ak sa text úplne nezmestí, mal by sa zobraziť fragment textu, ktorý úplne zapadá do daného bloku, za ktorým sa nastaví elipsa.

Táto úloha je celkom bežná, no zároveň nie je taká triviálna, ako sa zdá.

Možnosť pre jednoriadkový text v CSS

V tomto prípade môžete použiť vlastnosť text-overflow: elipsa. V tomto prípade musí mať kontajner vlastnosť pretečeniu rovný skryté alebo klip

Blok ( šírka : 250 pixelov ; medzera : nowrap ; pretečenie : skryté ; pretečenie textu : elipsa ; )

Možnosť pre viacriadkový text v CSS

Prvý spôsob, ako orezať viacriadkový text, je pomocou pomocou CSS vlastnosti uplatňujú pseudoprvky :predtým A :po. Začnime so značkami 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 exercitation 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 a zuguelo dule dodeleucinit

A teraz samotné vlastnosti

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 : relatívne ; top : -25 pixelov ; vľavo : 100 % ; šírka : 3 em ; ľavý okraj : -3 em ; padding-right : 5 pixelov ; zarovnanie textu : vpravo ; veľkosť pozadia : 100 % 100 % ; pozadie : lineárny gradient (doprava , rgba (255 , 255 , 255 , 0 ), biela 50 % , biela ); )

Ďalším spôsobom je využitie vlastnosti column-width, pomocou ktorej nastavíme šírku stĺpca pre viacriadkový text. Pri použití tejto metódy však nebude možné na konci nastaviť elipsu. 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 exercitation 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 a zuguelo dule dodeleucinit

Blok ( overflow : hidden ; height : 200px ; width : 300px ; ) .block__inner ( -webkit-column-width : 150px ; -moz-column-width : 150px ; column-width : 15010px) 0 % výška:

Existuje tretí spôsob riešenia viacriadkového textu pomocou CSS pre prehliadače Webkit. V ňom budeme musieť použiť niekoľko špecifických vlastností s predponou - webkit. Hlavným z nich je -webkit-line-clamp, ktorý vám umožňuje špecifikovať počet riadkov, ktoré sa majú vypísať v bloku. Riešenie je krásne, ale skôr obmedzené kvôli jeho práci v obmedzenej skupine prehliadačov

Blok ( overflow : hidden ; text-overflow : elipsa ; display : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ; )

Možnosť pre viacriadkový text v JavaScripte

Tu sa používa ďalší neviditeľný blok, do ktorého je na začiatku umiestnený náš text, potom sa odstraňuje jeden znak po druhom, až kým výška tohto bloku nebude menšia alebo rovná výške. požadovaný blok. A na konci sa text presunie do pôvodného bloku.

var block = dokument. querySelector(".block"), text = blok. innerHTML, clone = dokument. createElement("div"); klonovať štýl. poloha = "absolútna" ; klonovať štýl. viditeľnosť = "skryté" ; klonovať štýl. šírka = blok . clientWidth + "px" ; klonovať innerHTML = text ; dokument. telo. appendChild(klon); var l = text . dĺžka - 1; for (; l >= 0 && clone. clientHeight > block. clientHeight; -- l) (klon. innerHTML = text. substring (0, l) + "...";) blok. innerHTML = klon . innerHTML;

Je to rovnaké ako doplnok pre jQuery:

(funkcia ($) ( var truncate = funkcia (el) ( var text = el. text (), výška = el. výška (), klon = el. klon (); klon . css (( poloha : "absolútna" , viditeľnosť : "skryté" , výška : "auto" )); el. po (klon ); var l = text . dĺžka - 1 ; pre (; l >= 0 && klon . výška () > výška ; -- l ) ( klon . text ( text . podreťazec ( 0 , l ) + "..." ); ) el. text ( klon . text ()); klon . odstrániť (); ); $ . fn . skrátiťText = funkcia () ( return this . every (funkcia () ( skrátenie ($ (this )); )); ); )(jQuery ));

Definuje parametre viditeľnosti textu v bloku, ak sa celý text nezmestí do zadanej oblasti. Existujú dve možnosti: text je orezaný; text sa odreže a na koniec riadku sa pridá elipsa. text-overflow funguje, ak je vlastnosť pretečenia bloku nastavená na auto , scroll alebo hidden .

stručná informácia

Označenia

PopisPríklad
<тип> Označuje typ hodnoty.<размер>
A && BHodnoty musia byť na výstupe v zadanom poradí.<размер> && <цвет>
A | BOznačuje, že z navrhovaných hodnôt musíte vybrať iba jednu hodnotu (A alebo B).normálne | malé čiapky
A || BKaždá hodnota môže byť použitá samostatne alebo spolu s inými v ľubovoľnom poradí.šírka || počítať
Hodnoty skupín.[ plodina || kríž ]
* Opakujte nula alebo viackrát.[,<время>]*
+ Opakujte jeden alebo viackrát.<число>+
? Zadaný typ, slovo alebo skupina je voliteľná.vložka?
(A, B)Opakujte aspoň A, ale nie viac ako B-krát.<радиус>{1,4}
# Opakujte jeden alebo viackrát oddelené čiarkami.<время>#
×

hodnoty

klip Text je orezaný, aby sa prispôsobil oblasti. elipsa Text sa skráti a na koniec riadku sa pridá elipsa.

Príklad

text-overflow

Magnetické pole zanedbateľne tlmí veľký kruh nebeskej sféry, v tomto prípade sa excentricity a sklony dráh zväčšujú.

Výsledok tento príklad znázornené na obr. 1.

Ryža. 1. Elipsa na konci textu

Objektový model

Objekt.style.textOverflow

Poznámka

Opera pred verziou 11 používa vlastnosť -o-text-overflow.

Špecifikácia

Každá špecifikácia prechádza niekoľkými fázami schvaľovania.

  • Odporúčanie – špecifikácia bola schválená W3C a odporúča sa ako štandard.
  • Odporúčanie kandidáta ( Možné odporúčanie) - skupina zodpovedná za štandard je spokojná, že spĺňa svoje ciele, ale vyžaduje pomoc od vývojárskej komunity pri implementácii štandardu.
  • Navrhované odporúčanie Navrhované odporúčanie) - v tejto fáze je dokument predložený poradnej rade W3C na konečné schválenie.
  • Pracovný návrh – Vyspelejšia verzia návrhu, ktorá bola prediskutovaná a upravená na posúdenie komunitou.
  • Návrh editora ( Redakčný návrh) - návrh verzie normy po vykonaní zmien zo strany redaktorov projektu.
  • Návrh ( Návrh špecifikácie) - prvý návrh verzie normy.
×