Jak někdy otravují dlouhé názvy odkazů na produkty – každý tři řádky – nebo dlouhá nadpisy jiných bloků. Jak skvělé by bylo, kdyby se to celé dalo nějak zúžit, udělat kompaktnější. A když na něj najedete myší, zobrazí se celý název.

K tomu nám přijde na pomoc naše oblíbené CSS. Je to velmi jednoduché, podívej.

Řekněme, že máme takový blok z katalogu produktů:

Zde je jeho struktura:

Zde jsou jeho styly:

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

Souhlas, vypadá to hrozně. Název produktu samozřejmě můžete zkrátit. Ale co když jich jsou stovky nebo tisíce? Můžete také použít PHP k oříznutí části názvu a omezit jej na určitý počet znaků. Co když se ale později dispozice změní a bloky budou menší nebo naopak 2-3x větší? Nic z toho není možnost, nic z toho nám nevyhovuje.

A tady nám přichází na pomoc CSS a jeho magická vlastnost přetečení textu. Je však třeba jej správně používat ve spojení s několika dalšími vlastnostmi. Níže vám ukážu hotové řešení, po kterém vysvětlím, co je co.

Když tedy odložíme ruční úpravy názvů produktů a programové ořezávání stylů, vezmeme do rukou CSS a uvidíme, co dostaneme:

Miracle Yudo večerní dárce síly, tajemný, umění. 20255-59

Nádherný produkt za super cenu, pouze 100 rublů. Rozzáří vaše osamělé večery a dodá vám příval vitality!

No, je to lepší? Podle mého názoru velmi! A najeďte myší na název... voila! Tady se nám to ukazuje v plném rozsahu.

V naší struktuře se nic nezměnilo, jen jsem přidal divu s třídou .záhlaví titulní značka. A zde jsou nové, aktualizované styly:

Someblock( border: 1px solid #cccccc; margin: 15px auto; padding: 10px; width: 250px; ) .header( border-bottom: 1px přerušované; font-size: 16px; font-weight: bold; margin-bottom: 12px ; přetečení: skryté; přetečení textu: elipsa; mezera: nowrap; )

Podívejte se, co jsme udělali:

• Do bloku jsme přidali vlastnost white-space: nowrap, což odstraňuje schopnost textu zalamovat slova nový řádek, čímž se stáhne do řady;
• Pak jsme přidali nemovitost přepad: skrytý, která omezila viditelnost naší linky na šířku bloku, čímž odřízla vše nepotřebné a neukázala to návštěvníkovi;
• No, na konci jsme přidali elipsu do našeho řádku pomocí vlastnosti text-overflow: elipsa, čímž návštěvník pochopí, že toto není konec řady a že pravděpodobně musí zvednout myš a podívat se na to naplno.

Milujte CSS, naučte se CSS a tvorba webových stránek vám nebude připadat tak složitá =)

Mnoho lidí se pravděpodobně setkalo s problémem, kdy je potřeba zobrazit nějaký text na jednom řádku. Navíc může být text poměrně dlouhý a šířka bloku, ve kterém se tento text nachází, je obvykle omezena minimálně na stejnou velikost okna prohlížeče. Pro tyto případy byla vynalezena vlastnost text-overflow, která byla zahrnuta v doporučení CSS3 a byla poprvé implementována v IE6, a to velmi dávno. Při použití této vlastnosti pro blok, pokud je jeho text širší než samotný blok, pak se text ořízne a na konec se umístí elipsa. I když zde není vše tak jednoduché, vrátíme se k tomu trochu později.
S Internet Explorerem je vše jasné, co ostatní prohlížeče? A přestože je vlastnost text-overflow v současnosti vyloučena ze specifikace CSS3, Safari ji podporuje (podle alespoň, ve verzi 3) také Opera (od verze 9, i když vlastnost se nazývá -o-overflow-text). Ale Firefox ne, nepodporuje to a dokonce ani ve verzi 3 nebude. Smutné ale pravdivé. Ale možná se dá něco udělat?

Samozřejmě se to dá. Když jsem hledal na internetu tuto vlastnost a jak to udělat ve Firefoxu, narazil jsem jednoduché řešení. Podstata řešení:

To je vše. Podrobnosti si přečtěte v článku.
Řešení není špatné, ale existují problémy:

1. Text může být uprostřed (relativně řečeno) dopisu oříznut a uvidíme jeho „pahýl“.
2. Elipsa se zobrazí vždy, i když je text menší než šířka bloku (tedy z něj nevypadne a elipsa není potřeba).

Krok první

Nejprve se zaměřme na druhý problém, totiž jak se vyhnout zobrazování elipsy, když to není potřeba. Poté, co jsem si probral mozek a „trochu experimentoval“, našel jsem řešení. Pokusím se vysvětlit.
Jde o to, že potřebujeme samostatný blok s elipsou, která se objeví, až když text zabere příliš mnoho místa na šířku. Pak jsem přišel s myšlenkou padajícího plovoucího bloku. Ačkoli to zní děsivě, znamená to pouze blok, který je vždy tam a je stisknutý doprava, ale když se šířka textu zvětší, text posune blok na další řádek.
Přejděme k praxi, jinak se to těžko vysvětluje. Pojďme nastavit Struktura HTML:

velmi dlouhý text

Ne moc kompaktní, ale nic menšího jsem nedokázal. Máme tedy kontejnerový blok DIV.ellipsis, blok s naším textem a další blok, který bude obsahovat elipsu. Všimněte si, že „blok elipsy“ je ve skutečnosti prázdný, protože při kopírování textu nepotřebujeme další tři tečky. Také se nelekejte nedostatku dalších tříd, protože tato struktura je dobře řešena pomocí selektorů CSS. A zde je samotný CSS:

.ellipsis ( přetečení: skryté; mezera: nowrap; výška řádku: 1,2 em; výška: 1,2 em; ohraničení: 1px plná červená; ) .ellipsis > DIV:first-child (plovoucí: vlevo; ) .ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; ).elipsa >

To je vše. Zkontrolujeme a ujistíme se, že funguje tak, jak má ve Firefoxu, Opeře, Safari. V IE je velmi zvláštní, ale předvídatelný výsledek. V IE6 je vše pryč, ale v IE7 to prostě nefunguje, protože nepodporuje generovaný obsah. Ale k IE se vrátíme později.

Prozatím se podívejme, co jsme udělali. Nejprve nastavíme výšku řádku a výšku hlavního bloku, protože potřebujeme znát výšku bloku a výšku textového řádku. Stejnou hodnotu nastavíme pro horní okraj bloku s elipsou, ale se zápornou hodnotou. Když se tedy blok „neresetuje“ na další řádek, bude nad textovým řádkem (jeden řádek), při resetování bude na své úrovni (ve skutečnosti je nižší, jen jej vytáhneme o jeden řádek výše). Abychom skryli nepotřebné věci, zvláště když není potřeba zobrazovat elipsu, uděláme přetečení: skryté pro hlavní blok, takže když je elipsa nad čarou, nebude zobrazena. To nám také umožňuje odstranit text, který spadá mimo blok (k pravému okraji). Aby se text neočekávaně zalomil a netlačil blok s třemi tečkami níže a níže, uděláme white-space: nowrap, čímž zakážeme pomlčky - náš text bude vždy na jednom řádku. U bloku s textem nastavíme float: left, aby hned nesrazil blok s elipsou a zabral minimální šířku. Protože uvnitř hlavního bloku (DIV.ellipsis) jsou oba bloky plovoucí (plovoucí: vlevo/vpravo), hlavní blok se sbalí, když je textový blok prázdný, takže pro hlavní blok nastavíme pevnou výšku (výška: 1,2 em) . A nakonec použijeme pseudoprvek ::after k zobrazení elipsy. Pro tento pseudoprvek jsme také nastavili pozadí, které zakryje text, který se pod ním objeví. Nastavíme rám pro hlavní blok, abychom viděli rozměry bloku, později jej odstraníme.
Pokud by Firefox podporoval pseudoprvky stejně jako Opera a Safari z hlediska jejich umístění (nastavení pozice/floatu atd.), pak by bylo možné nepoužívat samostatný blok pro elipsu. Zkuste nahradit poslední 3 pravidla následujícími:

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

v Opeře a Safari vše funguje jako předtím a bez dalšího bloku elipsy. Firefox je ale zklamáním. Ale je to pro něj, o čem rozhodujeme. No, budete si muset vystačit s původní strukturou HTML.

Krok dva

Jak jste si mohli všimnout, zbavili jsme se problému se zobrazováním elips, když se text vejde do bloku. Ještě tu však máme jeden problém – text je oříznutý uprostřed písmen. A navíc to v IE nejde. Chcete-li překonat obojí, musíte použít nativní pravidlo přetečení textu pro prohlížeče a pouze pro Firefox použít řešení popsané výše (neexistuje žádná alternativa). Později přijdeme na to, jak vytvořit řešení „pouze pro Firefox“, ale nyní se pokusíme, aby to, co máme, fungovalo pomocí přetečení textu. Pojďme upravit CSS:

.elipsa ( přetečení: skryté; mezera: nowrap; výška řádku: 1,2 em; výška: 1,2 em; ohraničení: 1px plná červená; text-overflow: elipsa; -o-text-overflow: elipsa; šířka: 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: "..."; ) */

Jak se ukázalo, není moc co upravovat. Do stylu hlavního bloku byly přidány tři řádky. Dvě z nich zahrnují přetečení textu. Cvičení šířka šířka: 100% potřeba pro IE, aby text nerozšiřoval blok do nekonečna a fungovala vlastnost text-overflow; V podstatě jsme omezili šířku. Teoreticky se DIV, stejně jako všechny blokové prvky, táhne přes celou šířku kontejneru a šířka: 100 % je k ničemu, a dokonce škodlivé, ale IE má problém s rozložením, protože kontejner se vždy natáhne, aby se vešel obsahu, takže jinak to nejde. Vložili jsme také všechny vnitřní prvky, protože u některých prohlížečů (Safari a Opera) přetečení textu nebude fungovat jinak, protože uvnitř jsou blokové prvky. Poslední tři pravidla jsme okomentovali, protože v tomto případě nejsou potřeba a porušují vše (konflikt). Tato pravidla budou potřeba pouze pro Firefox.
Podívejme se, co máme, a pokračujeme.

Krok tři

Když jsem se ještě jednou podíval na stránku (předtím, než jsem se chystal napsat tento článek), zmíněnou na samém začátku, pak jsem ze zvědavosti prohledal komentáře, zda jsem nenašel chytré související nápady. A našel jsem to v komentáři, který hovořil o jiném řešení, které funguje ve Firefoxu a IE (pro tohoto člověka, stejně jako pro autora prvního článku, zřejmě žádné jiné prohlížeče neexistují). V tomto řešení se tedy autor s tímto jevem (absence přetečení textu) vypořádává trochu jinak a připojuje handlery k událostem přetečení a podtečení k prvkům, pro které bylo nutné v případě potřeby umístit elipsu. Není to špatné, ale zdá se mi, že toto řešení je velmi drahé (z hlediska zdrojů), zejména proto, že je poněkud závadné. Při zjišťování, jak toho dosáhl, však narazil na zajímavou věc, totiž Vlastnosti CSS o -moz-vazba. Pokud jsem pochopil, je to analogie chování v IE, jen s jinou omáčkou a chladičem. Ale nebudeme zabíhat do podrobností, řekněme, že tímto způsobem můžete připojit obslužný program JavaScriptu k prvku s pomocí CSS. Zní to divně, ale funguje to. Co to děláme:

.ellipsis ( přetečení: skryté; prázdné místo: nowrap; výška řádku: 1,2 em; výška: 1,2 em; ohraničení: 1px plná červená; přetečení textu: elipsa; -o-přetečení textu: elipsa; šířka: 100 % ; -moz-binding: url(moz_fix.xml#ellipsis); zoom: 1;) .elipsa * (zobrazit: inline; ) .moz-ellipsis > DIV:první dítě( plavat vlevo; displej: blok; } .moz-elipsa > DIV + DIV( float: right; margin-top: -1.2em; displej: blok; } .moz-ellipsis > DIV + DIV::after(barva pozadí: bílá; obsah: "..."; )

Jak vidíte, změn jsme opět moc neudělali. V tomto kroku v IE7 je podivná závada, vše je zkreslené, pokud nenastavíte zoom: 1 pro hlavní blok (nejjednodušší možnost). Pokud odstraníte (smažete, zakomentujete) pravidlo .ellipsis * nebo .moz-ellipsis > DIV + DIV (což vůbec neovlivňuje IE7), závada zmizí. Je to všechno zvláštní, pokud někdo ví, co je špatně, dejte mi vědět. Prozatím si vystačíme se zoomem: 1 a přejdeme na Firefox.
Vlastnost -moz-binding obsahuje soubor moz_fix.xml s instrukcí s identifikátorem se třemi tečkami. Obsah tohoto xml soubor Následující:

Vše, co tento konstruktor dělá, je přidání třídy moz-ellipsis k prvku, pro který selektor pracoval. To bude fungovat pouze ve Firefoxu (prohlížeče gecko?), takže pouze v něm bude k prvkům přidána třída moz-ellipsis a můžeme přidat dodatečná pravidla. To je to, co chtěli. Nejsem si úplně jistý potřebou this.style.mozBinding = “”, ale ze zkušenosti s vyjadřováním je lepší být na bezpečné straně (obecně tuto stránku Firefoxu moc neznám, takže mohu se mýlit).
Možná vás znepokojí, že tato technika používá externí soubor a JavaScript obecně. Není třeba se bát. Za prvé, pokud se soubor nenačte a/nebo je JavaScript deaktivován a nefunguje, je to v pořádku, uživatel jednoduše neuvidí elipsu na konci, text bude na konci bloku oříznut. To znamená, že v tomto případě dostaneme „nenápadné“ řešení. Můžete se sami přesvědčit.

Tak jsme získali styl pro prohlížeče „Velká čtyřka“, který implementuje přetečení textu pro Opera, Safari a IE a emuluje jej pro Firefox, ne příliš dobře, ale je to lepší než nic.

Krok čtyři

Tento bod bychom mohli ukončit, ale rádi bychom naše řešení trochu vylepšili. Protože můžeme připojit konstruktor k jakémukoli bloku a získat nad ním kontrolu, proč toho nevyužít. Zjednodušme naši strukturu:

velmi dlouhý text

Ach jo! Myslím, že se mnou budete souhlasit - to je to, co potřebujete!
Nyní odstraníme všechny nepotřebné věci ze stylu:

.ellipsis ( přetečení: skryté; mezera: nowrap; výška řádku: 1,2 em; výška: 1,2 em; přetečení textu: elipsa; -o-přetečení textu: elipsa; šířka: 100 %; -moz-vazba: 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::after ( barva pozadí: bílá; obsah: "..."; )

Konečně jsme odstranili červený okraj :)
Nyní přidáme něco málo do našeho moz_fix.xml:

Co se tam děje? Znovu vytváříme naši původní strukturu HTML. To znamená, že tyto potíže s bloky se provádějí automaticky a pouze ve Firefoxu. JavaScript kód je napsán podle nejlepších tradic :)
Bohužel se nevyhneme situaci, kdy je text uprostřed dopisu oříznut (i když možná dočasně, protože moje řešení je stále velmi hrubé a v budoucnu může fungovat). Tento efekt ale můžeme trochu vyhladit. K tomu potřebujeme obrázek (bílé pozadí s průhledným přechodem) a několik změn stylu:

.moz-ellipsis > DIV:first-child ( float: left; pravý okraj: -26px;) .moz-ellipsis > DIV + DIV ( float: right; margin-top: -1.2em; pozadí: url(elipsa.png) repeat-y; padding-left: 26px; }

Dívejme se a těšme se ze života.

Udělejme s tím konec.

Závěr

Dám vám malý příklad rozvržení třetí strany. Vzal jsem obsah jedné ze stránek Wikipedie (první, která se objevila) a použil jsem na ni výše popsanou metodu.
Obecně toto rozhodnutí lze nazvat univerzální pouze s protažením. Vše závisí na vašem uspořádání a jeho složitosti. Možná budete potřebovat pilník nebo možná tamburínu. I když ve většině případů si myslím, že to půjde. A pak, teď máte výchozí bod ;)
Doufám, že jste se z článku dozvěděli něco zajímavého a užitečného;) Učte se, experimentujte, sdílejte.
Hodně štěstí!

V bloku s pevnou výškou a šířkou je třeba zobrazit text libovolné délky. V tomto případě, pokud se text zcela nevejde, měl by se zobrazit fragment textu, který zcela zapadá do daného bloku, za kterým se nastaví elipsa.

Tento úkol je celkem běžný, ale zároveň není tak triviální, jak se zdá.

Možnost pro jednořádkový text v CSS

V tomto případě můžete použít vlastnost text-overflow: ellipsis. V tomto případě musí mít kontejner vlastnost přetékat rovnat se skrytý nebo klip

Block ( width : 250px ; white-space : nowrap ; overflow : hidden ; text-overflow : elipsa ; )

Možnost pro víceřádkový text v CSS

První způsob, jak oříznout víceřádkový text, je pomocí pomocí CSS vlastnosti uplatňují pseudoprvky :před A :po. Začněme se značkami HTML

A nyní 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 : relativní ; top : -25px ; left : 100 % ; width : 3 em ; margin-left : -3 em ; padding-right : 5px ; text-align : right ; background-size : 100 % 100 % ; background : linear-gradient (doprava , rgba (255 , 255 , 255 , 0 ), bílá 50 % , bílá ); )

Dalším způsobem je využití vlastnosti column-width, pomocí které nastavíme šířku sloupce pro víceřádkový text. Při použití této metody však nebude možné na konci nastavit elipsu. HTML:

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

Existuje třetí způsob, jak vyřešit víceřádkový text pomocí CSS pro prohlížeče Webkit. V něm budeme muset použít několik specifických vlastností s předponou - webkit. Hlavním z nich je -webkit-line-clamp, který umožňuje zadat počet řádků, které se mají vytisknout v bloku. Řešení je krásné, ale vzhledem k jeho práci v omezené skupině prohlížečů spíše omezené

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

Možnost víceřádkového textu v JavaScriptu

Zde je použit další neviditelný blok, do kterého je zpočátku umístěn náš text, poté je odstraňován jeden znak po druhém, dokud výška tohoto bloku nebude menší nebo rovna výšce. požadovaný blok. A na konci se text přesune do původního bloku.

var block = dokument. querySelector(".block"), text = blok. innerHTML, clone = dokument. createElement("div"); klon styl. pozice = "absolutní" ; klon styl. viditelnost = "skrytý" ; klon styl. šířka = blok. clientWidth + "px" ; klon innerHTML = text ; dokument. tělo. appendChild(klon); var l = text . délka - 1 ; for (; l >= 0 && clone . clientHeight > block. clientHeight ; -- l ) ( clone . innerHTML = text . substring ( 0 , l ) + "...";) blok. innerHTML = klon . innerHTML;

To je stejné jako plugin pro jQuery:

(funkce ($) ( var truncate = funkce (el) ( var text = el . text (), výška = el . výška (), clone = el . clone (); clone . css (( pozice : "absolutní" , viditelnost : "skrytý" , výška: "auto" )); el. po (klon ); var l = text . délka - 1 ; pro (; l >= 0 && klon . výška () > výška ; -- l ) ( klon . text ( text . dílčí řetězec ( 0 , l ) + "..." ); ) el. text ( klon . text ()); klon . odstranit (); ); $ . fn . zkrátitText = funkce () ( vrátit toto . every (funkce () ( zkrátit ($ (this )); )); ); )(jQuery ));

Definuje parametry viditelnosti textu v bloku, pokud se celý text nevejde do určené oblasti. Jsou dvě možnosti: text je oříznut; text se ořízne a na konec řádku se přidá elipsa. text-overflow funguje, pokud je vlastnost přetečení bloku nastavena na auto , scroll nebo hidden .

stručné informace

Označení

	Popis	Příklad
<тип>	Označuje typ hodnoty.	<размер>
A && B	Hodnoty musí být na výstupu v uvedeném pořadí.	<размер> && <цвет>
A | B	Označuje, že musíte vybrat pouze jednu z navržených hodnot (A nebo B).	normální | malé kapky
A || B	Každá hodnota může být použita samostatně nebo společně s ostatními v libovolném pořadí.	šířka || počet
	Hodnoty skupin.	[ plodina || přejít ]
*	Opakujte nula nebo vícekrát.	[,<время>]*
+	Opakujte jednou nebo vícekrát.	<число>+
?	Zadaný typ, slovo nebo skupina je volitelný.	vložka?
(A, B)	Opakujte alespoň A, ale ne více než Bkrát.	<радиус>{1,4}
#	Opakujte jednou nebo vícekrát odděleně čárkami.	<время>#

×

Hodnoty

klip Text je oříznut tak, aby odpovídal oblasti. elipsa Text se ořízne a na konec řádku se přidá elipsa.

Příklad

Magnetické pole zanedbatelně tlumí velký kruh nebeské sféry, v takovém případě se excentricity a sklony drah zvětšují.

Výsledek tento příklad znázorněno na Obr. 1.

Rýže. 1. Elipsa na konci textu

Objektový model

Objekt.style.textOverflow

Poznámka

Opera před verzí 11 používá vlastnost -o-text-overflow.

Specifikace

Každá specifikace prochází několika fázemi schvalování.

• Doporučení – Specifikace byla schválena W3C a je doporučena jako standard.
• Doporučení kandidáta ( Možné doporučení) - skupina odpovědná za standard je spokojena, že splňuje své cíle, ale vyžaduje pomoc od vývojářské komunity při implementaci standardu.
• Navrhované doporučení Doporučené doporučení) - v této fázi je dokument předložen poradní radě W3C ke konečnému schválení.
• Working Draft – Vyspělejší verze návrhu, která byla prodiskutována a upravena pro komunitní recenzi.
• Předloha editora ( Redakční návrh) - návrhová verze normy po změnách, které provedli redaktoři projektu.
• Koncept ( Návrh specifikace) - první verze návrhu normy.

×