Přejít k navigační liště

Zdroják » Zprávičky » CSS řešení pro oříznutí textu

CSS řešení pro oříznutí textu

Zprávičky Webdesign

Nálepky:

Pokud máte blok o pevně daných rozměrech, který plníte textem o předem neznámé délce a formátování, narazíte na problém, co udělat s přesahujícím řádkem. Jak docílit toho, aby se díky overflow:hidden neobjevil ošklivě useknutý?

Michael Mahemoff upozorňuje, že tento problém elegantně vyřešil kupříkladu Amazon a to čistým CSS řešením (bez použití JavaScriptu). Na konec bloku s textem umístí překryvný element, kterému jako pozadí nastaví linear-gradient (v tuto chvíli ve variantě se všemi -moz-, -webkit- apod. prefixy). Pokud poslední řádek tak bude postupně mizet, čímž se vyřeší ono ošklivé oříznutí. Více najdete v původním textu Amazon’s Pure CSS Solution to Avoid Cutting Off Text.

Komentáře

Subscribe
Upozornit na
guest
4 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
ic

Téměř stejné řešení… tedy s linar gradient a přechodem z průhledné barvy do bílé barvy používá i Google ve svém Play store. Jen je napojená na následující element. Pomocí JS se pak dá odkrýt další text a gradient zmizí. K nahlédnutí je to u aplikací s delším popisem, třeba zde: https://play.google.com/store/apps/details?id=com.chen.netsexypositionnoces

Jirka

jj … já používám ještě jednu fintu – „:after“ selektor – takže není problém navěsit ten gradient čistě stylem na daný prvek a to i bez použití obrázku – jen stylopisným definicí (jak sám zmiňuješ). Příklad třeba tady: http://jsfiddle.net/47ded/

Martin Držka

Cílem těchto gradient překrytí je hlavně pomoc uživateli, že text nekončí ale pokračuje, než snaha skrýt „useknutý” text.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.