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

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 založil a vede magazín Zdroják. Absolvoval VŠCHT Praha. Byl u založení projektu CZilla (dnes už nepamatujete, nevadí). Stavěl mosty a metal cestu pro HTML5 (to tu ještě máme). V GUG.cz organizoval akce pro vývojáře (a jestli neumřeli, kódují si dodnes…).

Komentáře: 4

Přehled komentářů

ic Stejně tak play.google.com
Jirka Re: Stejně tak play.google.com
Martin Držka Re: CSS řešení pro oříznutí textu
Martin Hassman Re: CSS řešení pro oříznutí textu
Zdroj: https://www.zdrojak.cz/?p=2693