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

Odebírat
Upozornit na
guest
4 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
Zobrazit všechny komentáře
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.

Strategie a AI jako klíč. Do Prahy přijely špičky technologického světa

WebExpo 2025 ukázalo, jak se tvoří budoucnost. Třídenní technologická konference WebExpo 2025 přivedla do Prahy světové i české experty, kteří nabídli inspiraci napříč obory. Hlavním tématem byla propojenost disciplín, význam AI a potřeba otevřenosti vůči novým výzvám – včetně podpory legální imigrace. Ukázalo se, že inovace vznikají nejen v Silicon Valley, ale i tam, kde se nebojíme myslet jinak.

Přístupnost není jen o splnění norem: nový pohled na inkluzivní design

Přístupnost a inkluze možná nepatří mezi nejžhavější témata digitálního světa – dokud o nich nezačne mluvit Vitaly Friedman. Na WebExpo 2024 předvedl, že inkluzivní design není jen o splněných checkboxech, ale hlavně o lidech. S energií sobě vlastní obrátil zažité přístupy naruby a ukázal, že skutečně přístupný web je nejen možný, ale i nezbytný.

Efektivnější vývoj UI nebo API: Co si odnést z WebExpo 2025?

Různé
Komentáře: 0
Jak snadno implementovat moderní uživatelské rozhraní? Které funkce brzdí rychlost vašeho webu? A kdy raději sami přibrzdit, abychom využitím AI nepřekročili etické principy? Debatu aktuálních dev témat rozdmýchá sedmnáctý ročník technologické konference WebExpo, která proběhne v Praze od 28. do 30. května. Který talk či workshop si rozhodně nenechat ujít? Toto je náš redakční výběr z vývojářských hroznů.