Css tečky, pokud se nevejde. Oříznutí jednořádkového nebo víceřádkového textu na výšku přidáním elipsy

V některých případech se obsah bloku objeví mimo hranice prvku a překrývá jej. Chcete-li řídit chování prvků na úrovni bloku, použijte vlastnost overflow, která určuje, jak se má zobrazit obsah přesahující blok.

Pomocí vlastnosti clip můžete oříznout prvek na zadané rozměry.

1. Vlastnost přetečení

Obsah prvků bloku může přetékat blok, když má blok explicitně výšku a/nebo šířku. Bez zadání výšky se blok roztáhne, aby se přizpůsobil obsahu, pokud není umístěn na pozici: absolutní; nebo poloha: pevná; . Text může přetékat blok na výšku, obrázky - na výšku a šířku.

2. Vlastnost Overflow-x

Tato vlastnost určuje, jak bude pravý okraj obsahu uvnitř bloku oříznut, pokud přeteče.

Syntax:

Div ( overflow-x: skryté; )

3. Přetečení-y vlastnost

Tato vlastnost určuje, jak bude oříznut spodní okraj obsahu uvnitř bloku, pokud přeteče.

Syntax:

Div (overflow-y: skryté; )

4. Vlastnost klipu

Tato vlastnost určuje, jak velká část prvku bude viditelná. Část prvku, která zůstane viditelná po oříznutí, se nazývá oblast oříznutí. Oříznutí se aplikuje na prvek, který je zpočátku plně viditelný. Tato vlastnost se vztahuje na prvky, které mají vlastnost position nastavenou na absolutní nebo pevnou.

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 rovný 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 použití Vlastnosti CSS použít pseudo prvky :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 : 3em ; padding-velikost : 100% 100% ;

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é nastavit na konci 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í" ;

(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" )); ( klon . text ( text . dílčí řetězec ( 0 , l ) + "..." ); el . text ( klon . odebrat ( ) ); ( vrátit toto . every (funkce () ( zkrácení ( $ ( toto )); ) )( jQuery ));

Problém

Řezání není jen o rychlý způsob dosažení cíle, ale také oblíbená stylingová možnost jak v designu tisku, tak v designu webu. Nejčastěji se jedná o řezání jednoho nebo více rohů nádoby pod úhlem 45°. V v poslední době, vzhledem k tomu, že skeuomorfismus začal ztrácet půdu pod nohama na plochý design, je tento efekt obzvláště populární. Když jsou rohy oříznuty pouze na jedné straně a každý roh zabírá 50 % výšky prvku, vytvoří se tvar ve tvaru šipky, který se také často používá při návrhu tlačítek a prvků navigace ve strouhance.

CSS však stále nemá dostatek nástrojů k vytvoření tohoto efektu pomocí jednoduchých, přímočarých jednořádkových linií. Z tohoto důvodu má mnoho vývojářů tendenci používat obrázky na pozadí: Buď zakryjte oříznuté rohy trojúhelníky (na jednobarevném pozadí), nebo vytvořte celé pozadí pomocí jednoho nebo více obrázků, kde jsou rohy již oříznuté. Je zřejmé, že takové metody jsou zcela neflexibilní, obtížně se udržují a zvyšují latenci kvůli dalším HTTP požadavkům a celkové velikosti souborů webových stránek.

Příklad webové stránky, kde oříznutý roh (vlevo dole v poloprůhledném poli Najít a rezervovat) dokonale zapadá do designu

Řešení

Jeden možné řešení nabídněte nám všemocné přechody CSS. Řekněme, že chceme pouze jeden odříznutý roh, řekněme pravý dolní roh. Trik spočívá ve využití schopnosti přechodů zaujmout směr úhlu (například 45°) a polohu hranic barevného přechodu v absolutních hodnotách, které se nemění, když se celkové rozměry prvku, do kterého pozadí patří změně. Z výše uvedeného vyplývá, že nám bude stačit jeden lineární gradient.

Přidáme průhledný okraj se slábnutím pro vytvoření oříznutého rohu a další okraj s vyblednutím na stejnou pozici, ale s barvou, která odpovídá pozadí. CSS kód bude následující (pro 15px roh):

pozadí: #58a;
background:linear-gradient(-45deg, transparentní 15px, #58a 0);

Jednoduché, že? Výsledek můžete vidět na obrázku.

Technicky ani nepotřebujeme první oznámení. Přidali jsme to pouze jako řešení: pokud přechody CSS nejsou podporovány, bude druhá deklarace ignorována, takže alespoň získáme jednobarevné pozadí. Nyní řekněme, že potřebujeme dva oříznuté rohy, řekněme oba spodní rohy. To nejde udělat jen s jedním přechodem, takže budeme potřebovat dva. Vaše první myšlenka může být něco takového:

pozadí: #58a;
pozadí: linear-gradient(-45deg, transparentní 15px, #58a 0), linear-gradient(45deg, transparent 15px, #655 0);

To však nefunguje. Ve výchozím nastavení oba přechody zabírají celou plochu prvku, takže se navzájem zakrývají. Musíme je zmenšit tak, že každý z nich omezíme na polovinu prvku pomocí velikosti pozadí:
pozadí: #58a;

velikost pozadí: 50 % 100 %;

Výsledek můžete vidět na obrázku.

I když jsme použili velikost pozadí , přechody se stále překrývají. Důvodem je, že jsme zapomněli vypnout opakování pozadí, takže každé z pozadí se opakuje dvakrát. V důsledku toho jedno z pozadí stále zakrývá druhé, ale tentokrát prostřednictvím opakování. Nová verze kód vypadá takto:
pozadí: #58a;
pozadí: linear-gradient(-45deg, transparent 15px, #58a 0) right, linear-gradient(45deg, transparent 15px, #655 0) left;
velikost pozadí: 50 % 100 %;

Výsledek můžete vidět na obrázku a přesvědčit se, že tam konečně je! - funguje! Pravděpodobně jste již uhodli, jak tento efekt aplikovat na všechny čtyři rohy. Budete potřebovat čtyři přechody a kód podobný následujícímu:

pozadí: #58a;
pozadí: linear-gradient(135°, transparentní 15px, #58a 0) vlevo nahoře,

linear-gradient(-135deg, transparentní 15px, #655 0) vpravo nahoře,

linear-gradient(-45deg, transparentní 15px, #58a 0) vpravo dole,

linear-gradient(45deg, transparentní 15px, #655 0) vlevo dole;
velikost pozadí: 50 % 50 %;
background-repeat: no-repeat;

RADY
Použili jsme různé barvy (#58a a #655), abychom usnadnili ladění. V praxi budou mít oba přechody stejnou barvu.
Ale problém s předchozím kódem je, že je obtížné jej udržovat. Vyžaduje pět úprav pro změnu barvy pozadí a čtyři pro změnu hodnoty úhlu. Mixin vytvořený pomocí preprocesoru by mohl snížit počet opakování. Takto by tento kód vypadal v SCSS:
SCSS
@mixin beveled-corners($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
pozadí: $bg;
pozadí:
lineární gradient (135 stupňů, transparentní $tl, $bg 0)
vlevo nahoře,
lineární gradient (225 stupňů, transparentní $tr, $bg 0)
vpravo nahoře,
lineární gradient (-45 stupňů, transparentní $br, $bg 0)
vpravo dole,
lineární gradient (45 stupňů, transparentní $bl, $bg 0)
vlevo dole;
velikost pozadí: 50 % 50 %;
background-repeat: no-repeat;
}

V případě potřeby jej lze volat, jak je uvedeno níže, s 2-5 argumenty:
SCSS
@include beveled-corners(#58a, 15px, 5px);
V tomto příkladu skončíme s prvkem, který má svůj levý horní a pravý dolní roh oříznutý o 15 pixelů a jeho pravý horní a levý dolní roh ořezaný o 5 pixelů, podobně jako funguje border-radius, když zadáme méně než čtyři hodnoty. To je možné, protože jsme se také postarali o výchozí hodnoty pro argumenty v našem mixu SCSS – a ano, tyto výchozí hodnoty mohou odkazovat i na další argumenty.
VYZKOUŠEJTE TO SAMI!
http://play.csssecrets.io/bevel-corners-gradients

Zakřivené řezané rohy

Vynikající příklad použití zakřivených oříznutých rohů na webu. http://g2geogeske.com designér z nich udělal ústřední prvek designu: jsou přítomny v navigaci, v obsahu a dokonce i v patičce.
Varianta metody s přechody vám umožňuje vytvářet zakřivené rohy řezu – efekt, který mnozí nazývají „poloměr vnitřního okraje“, protože vypadá jako obrácená verze zaoblených rohů. Jediný rozdíl je v použití radiálních gradientů namísto lineárních:
pozadí: #58a;
pozadí: radiální přechod (kruh vlevo nahoře, průhledný 15px, #58a 0) vlevo nahoře,

radiální přechod (kruh vpravo nahoře, průhledný 15px, #58a 0) vpravo nahoře,

radial-gradient (kruh vpravo dole, průhledný 15px, #58a 0) vpravo dole,

radial-gradient(kruh vlevo dole, průhledný 15px, #58a 0) vlevo dole;
velikost pozadí: 50 % 50 %;
background-repeat: no-repeat;

Stejně jako v předchozí technice může být velikost úhlu řízena polohami hranic přechodu barev a mixin může učinit tento kód vhodnější pro další údržbu.

VYZKOUŠEJTE TO SAMI!
http://play.csssecrets.io/scoop-corners

Řešení s řetězcem SVG a border-image

I když řešení založené na přechodech funguje, má několik nevýhod:
Kód je velmi dlouhý a plný opakování. V nejběžnějším případě, kdy potřebujeme oříznout všechny čtyři rohy o stejnou hodnotu, znamená změna této hodnoty čtyři změny kódu.

Podobně změna barvy pozadí také vyžaduje čtyři úpravy, a pokud vezmete v úvahu záložní řešení, pak všech pět; Animace změn velikosti oříznutého rohu je neuvěřitelně náročná a v některých prohlížečích zcela nemožná. Naštěstí, v závislosti na požadovaném výsledku, můžeme použít několik dalších metod. Jedním z nich je sjednocení border-image s řetězcovým SVG kódem, ve kterém jsou generovány rohy.

Vědět, jak to funguje border-image(když si potřebujete osvěžit tyto znalosti v paměti, nápovědu najdete), umíte si už představit, jak by měla ta požadovaná vypadat? SVG-kód?

Vzhledem k tomu, že celkové rozměry pro nás nejsou důležité (o změnu měřítka se postará Border-image a obrázky SVG jsou perfektně zmenšeny bez ohledu na velikost - buďte požehnáni vektorová grafika!), všechny velikosti lze přirovnat k jedné, aby bylo možné pracovat s pohodlnějšími a kratšími hodnotami. Hodnota oříznutého rohu bude rovna jedné a rovné strany budou také rovné jedné. Výsledek (zvětšeno pro snadnější prohlížení). Kód potřebný k tomu je uveden níže:
ohraničení: 15px pevné průhledné;


width=”3″ height=”3″ fill=”%2358a”>\
\
’);

Všimněte si, že velikost kroku krájení je 1. To neznamená 1 pixel; skutečná velikost je určena souřadnicovým systémem souboru SVG (což je důvod, proč nemáme jednotky). Pokud bychom použili procenta, museli bychom aproximovat 1/3 obrázku zlomkovou hodnotou, například 33,34 % . Uchýlit se k přibližným hodnotám je vždy riskantní různé prohlížeče Hodnoty mohou být zaokrouhleny na různé stupně přesnosti. A tím, že se budeme držet jednotek změny v souřadnicovém systému souboru SVG, ušetříme si bolesti hlavy, které s tím vším zaokrouhlováním přichází.

Jak můžete vidět, oříznuté rohy jsou přítomny, ale není zde žádné pozadí. Existují dva způsoby, jak tento problém vyřešit: buď definovat pozadí, nebo přidat klíčové slovo fill do deklarace border-image, aby nebyl zahozen prvek středového řezu. V našem příkladu bychom raději definovali samostatné pozadí, protože tato definice bude sloužit také jako řešení pro prohlížeče, které toto řešení nepodporují.

Navíc jste si pravděpodobně všimli, že řezané rohy jsou nyní menší než u předchozí techniky, což může být matoucí. Nastavili jsme šířku rámečku na 15px! Důvodem je, že v gradientovém řešení bylo těchto 15 pixelů měřeno podél gradientní čáry, která je kolmá ke směru gradientu. Šířka rámu se však neměří diagonálně, ale horizontálně/vertikálně.

Cítíš, kam tím mířím? Ano, ano, opět všudypřítomná Pythagorova věta, kterou jsme aktivně využívali. Diagram na obrázku by měl věci objasnit.

Stručně řečeno, abychom dosáhli stejného vizuálního výsledku, potřebujeme šířku okraje, která je dvojnásobkem velikosti, kterou bychom použili v metodě přechodu. V v tomto případě bude to pixel, který je nejrozumnější přiblížit se k 20 pixelům, pokud nestojíme před úkolem přiblížit velikost úhlopříčky co nejblíže ceněným 15 pixelům:

border-image: 1 url(‘data:image/svg+xml,\

width=”3″ height=”3″ fill=”%2358a”>\

0,2″/>\
’);
pozadí: #58a;
Jak však vidíte, výsledek není úplně takový, jaký jsme očekávali.

Kam se poděly naše pečlivě řezané zatáčky? Neboj se, mladý padawane, rohy jsou stále na svém místě. Okamžitě pochopíte, co se stalo, pokud nastavíte jinou barvu pozadí, například #655.
Jak ukazuje obrázek níže, důvodem, proč naše rohy zmizely, je pozadí: pozadí, které jsme definovali výše, je jednoduše zakrývá. Vše, co musíme udělat, abychom tuto nepříjemnost odstranili, je použít klip na pozadí, abychom zabránili vkrádání pozadí pod oblast snímku:
ohraničení: 20px pevné průhledné;
border-image: 1 url(‘data:image/svg+xml,\

width=”3″ height=”3″ fill=”%2358a”>\

0,2″/>\
’);
pozadí: #58a;

Nyní je problém vyřešen a naše pole vypadá úplně stejně jako předtím. Navíc tentokrát můžeme snadno změnit velikost rohů pouze jednou úpravou: jednoduše upravíme šířku rámečku. Tento efekt můžeme dokonce animovat, protože šířka okraje podporuje animaci!

A změna pozadí nyní vyžaduje dvě úpravy místo pěti. Navíc, protože naše pozadí nezávisí na efektu aplikovaném na rohy, můžeme mu dát přechod nebo jakýkoli jiný vzor, ​​pokud je barva na okrajích stále #58a .

Například používáme radiální gradient od hsla(0,0%,100%,.2) po transparentní. Zbývá vyřešit jen jeden malý problém. Pokud není podporován obrázek ohraničení, nebude záložní řešení omezeno na absenci oříznutých rohů. Protože je pozadí oříznuté, bude mezi okrajem pole a jeho obsahem méně místa. Abychom to napravili, musíme definovat stejnou barvu pro rámeček, jakou používáme pro pozadí:
ohraničení: 20px plný #58a;
border-image: 1 url(‘data:image/svg+xml,\

width=”3″ height=”3″ fill=”%2358a”>\
\
’);
pozadí: #58a;
background-clip: padding-box;

V prohlížečích, kde je naše definice border-image Pokud je podporována, bude tato barva ignorována, ale pokud selže obrázek ohraničení, další barva ohraničení poskytne elegantnější záložní řešení. Jeho jedinou nevýhodou je, že zvyšuje počet úprav potřebných ke změně barvy pozadí na tři.
VYZKOUŠEJTE TO SAMI!
http://play.csssecrets.io/bevel-corners

Řešení ořezové cesty

I když je řešení hraničního obrazu velmi kompaktní a dobře se řídí principy DRY, přináší určitá omezení. Například naše pozadí by mělo být stále buď celé, nebo alespoň podél okrajů, vyplněno plnou barvou.

Co když chceme použít jiný typ pozadí, jako je textura, vzor nebo lineární přechod? Existuje další metoda, která taková omezení nemá, i když samozřejmě existují určitá omezení pro její použití.

Pamatujte na nemovitost klipová cesta z tajemství „Jak vyrobit kosočtverec“? Ořezové cesty CSS mají úžasnou vlastnost: umožňují míchat procentuální hodnoty (způsob, jakým určujeme celkové rozměry prvku) s absolutními hodnotami, což poskytuje neuvěřitelnou flexibilitu. Například kód pro ořezovou cestu, která ořízne prvek na obdélník o velikosti 20 pixelů se zkosenými rohy (měřeno vodorovně), vypadá takto:
pozadí: #58a;
clip-path: polygon(
20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc (100% - 20px), calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px);
Přestože je tento kus kódu krátký, nedodržuje principy DRY, a to se stává jedním z největších problémů, pokud nepoužíváte preprocesor. Ve skutečnosti je tento kód nejlepší ilustrací principu WET ze všech čistě CSS řešení prezentovaných v této knize, protože ke změně velikosti rohu vyžaduje až osm (!) úprav.

Na druhou stranu, pozadí lze změnit jen jednou úpravou, tedy alespoň to máme. Jedna z výhod tento přístup- skutečnost, že můžeme použít naprosto jakékoli pozadí nebo dokonce oříznutí náhradních prvků, jako jsou obrázky. Na obrázku je obrázek stylizovaný pomocí oříznutých rohů. Žádná z předchozích metod nemůže dosáhnout tohoto efektu. Vlastnost clip-path navíc podporuje animaci a animovat můžeme nejen změnu velikosti rohu, ale i přechody mezi různými tvary.

Vše, co musíte udělat, je použít jinou ořezovou cestu. Kromě toho, že je podrobný a má omezenou podporu prohlížeče, je nevýhodou tohoto řešení to, že pokud nezajistíme, aby výplň byla dostatečně široká, text bude také oříznut, protože oříznutí prvku nebere žádnou z jeho součástí. v úvahu. Naproti tomu metoda přechodu umožňuje, aby text jednoduše přesahoval oříznuté rohy (koneckonců jsou jen součástí pozadí) a metoda border-image funguje stejně jako běžné okraje – obtéká text na nový čára.

VYZKOUŠEJTE TO SAMI!
http://play.csssecrets.io/bevel-corners-clipped

BUDOUCÍ ŘEZNÉ ROHY
V budoucnu se nebudeme muset uchýlit k přechodům CSS, ořezávání nebo SVG, abychom dosáhli efektu oříznutých rohů. Nová nemovitost rohový tvar, zahrnuto v CSS Backgrounds & Borders Level 4 , zachrání nás od této bolesti hlavy. Slouží k vytvoření efektu rohů vyřezaných do různých tvarů v kombinaci s vlastností border-radius, která je nezbytná pro určení množství oříznutí. Například k popisu 15px řezaných rohů na všech stranách obrázku stačí následující jednoduchý kód:

border-radius: 15px;
rohový tvar: zkosení;

Přečtěte si také

Vlad Merževič

Navzdory tomu, že velké úhlopříčné monitory jsou stále dostupnější a jejich rozlišení se neustále zvyšuje, občas vyvstává úkol vměstnat do omezeného prostoru hodně textu. To může být například potřeba pro mobilní verze nebo pro rozhraní, ve kterém je důležitý počet řádků. V takových případech má smysl dlouhé řádky textu oříznout a ponechat pouze začátek věty. Rozhraní tak dostaneme do kompaktní podoby a snížíme množství zobrazovaných informací. Samotné ořezávání řádku lze provést na straně serveru pomocí stejného PHP, ale je to jednodušší pomocí CSS a vždy můžete zobrazit celý text, například když na něj najedete kurzorem myši. Dále se podíváme na metody řezání textu pomyslnými nůžkami.

Ve skutečnosti to vše spočívá v použití vlastnosti overflow s hodnotou hidden . Rozdíly spočívají pouze v odlišném zobrazení našeho textu.

Použití přetečení

Aby se vlastnost overflow projevila s textem v celé své kráse, musíte text rozbalit pomocí mezer s hodnotou nowrap . Pokud tak neučiníte, nedojde k efektu, který potřebujeme, k textu se přidají pomlčky a zobrazí se celý text. Příklad 1 ukazuje, jak oříznout dlouhý text pomocí zadané sady vlastností stylu.

Příklad 1. přetečení pro text

HTML5 CSS3 IE Cr Op Sa Fx

Výsledek tohoto příkladu je znázorněn na Obr. 1.

Rýže. 1. Vzhled textu po použití vlastnosti přetečení

Jak je vidět z obrázku, obecně je zde jedna nevýhoda - není zřejmé, že text má pokračování, takže na to musí být uživatel upozorněn. To se obvykle provádí pomocí přechodu nebo elipsy.

Přidání přechodu k textu

Aby bylo jasnější, že text vpravo nekončí, můžete na něj překrýt přechod z průhledné barvy do barvy pozadí (obr. 2). Tím vznikne efekt postupného rozpouštění textu.

Rýže. 2. Přechodový text

Příklad 2 ukazuje, jak tento efekt vytvořit. Styl samotného prvku zůstane prakticky stejný, ale samotný přechod doplníme pomocí pseudoprvku ::after a CSS3. K tomu vložíme prázdný pseudoelement přes vlastnost content a aplikujeme na něj přechod s různými předponami pro hlavní prohlížeče (příklad 2). Šířku přechodu lze snadno změnit pomocí width , upravit lze i míru průhlednosti nahrazením hodnoty 0,2 vlastní.

Příklad 2: Přechod přes text

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Intra-diskrétní arpeggio transformuje polysérii, jedná se o jednorázovou vertikálu v super polyfonní tkanině.

Tato metoda nefunguje v Internetový prohlížeč Průzkumník až do verze 8.0 včetně, protože nepodporuje přechody. Ale můžete opustit CSS3 a vytvořit přechod staromódním způsobem, prostřednictvím obrázku ve formátu PNG-24.

Tuto metodu lze kombinovat pouze s obyčejným pozadím a v případě obrázku na pozadí bude patrný přechod nad textem.

Elipsa na konci textu

Místo přechodu můžete také použít elipsu na konci oříznutého textu. Navíc bude přidán automaticky pomocí vlastnosti text-overflow. Rozumí jí všechny prohlížeče, včetně starších verzí IE, a jedinou nevýhodou této vlastnosti je, že její stav je aktuálně nejasný. Zdá se, že CSS3 tuto vlastnost obsahuje, ale kód s ní neprošel validací.

Příklad 3 ukazuje použití vlastnosti text-overflow s hodnotou elipsa, která přidává elipsu. Když najedete myší na text, zobrazí se celý a zvýrazní se barvou pozadí.

Příklad 3: Použití přetečení textu

HTML5 CSS3 IE Cr Op Sa Fx

Nevědomí způsobuje kontrast, který Lee Ross označuje za základní atribuční chybu, kterou lze vidět v mnoha experimentech.

Výsledek tohoto příkladu je znázorněn na Obr. 3.

Rýže. 3. Text s elipsami

Velkou výhodou těchto metod je, že se přechod a elipsy nezobrazují, pokud je text krátký a celý se vejde do dané oblasti. Text se tedy zobrazí jako obvykle, když je zcela viditelný na obrazovce a bude oříznut, když se zmenší šířka prvku.