CSS řešení pro oříznutí textu
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.
Martin Hassman
Martin Hassman založil a řadu let vedl magazín Zdroják, absolvoval VŠCHT Praha, pořádal řadu konferencí, pomáhal s rozšířením otevřených technologií, byl u založení projektů CZilla, Dáme roušky a dalších. Vymyslel a dva roky vedl dobrovolnický projekt Movapp pod Česko.Digital. Nyní pracuje jako produktový manažer v datové platformě Golemio.cz.
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
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/
Cílem těchto gradient překrytí je hlavně pomoc uživateli, že text nekončí ale pokračuje, než snaha skrýt „useknutý” text.
Z pohledu UX rozhodně ano. To nic nemění na tom, že je to současně velmi elegantní designové řešení pro ořezávání textu. Aneb dvě mouchy jednou ranou.