Oříznutí víceřádkového obsahu

Zatímco oříznutí jednoho řádku textu není zase taková věda, zajistit totéž u delšího odstavce s více řádky je komplikovanější.

Standardní elegantní řešení je poměrně obtížné najít.

Ve staré Opeře 12 existuje nestandardní hodnota CSS text-overflow (ukázka):

.tri-tecky-opera {
  text-overflow: -o-ellipsis-lastline;
}

V Chrome je možné využít nestandardní vlastnost -webkit-line-clamp (ukázka):

.tri-tecky-chrome {
  display: -webkit-box;
  -webkit-line-clamp: 8; /* počet řádků */
  -webkit-box-orient: vertical;
}

Toto řešení není úplně šikovné, protože je závislé například na velikosti písma – velké písmo vyplní prostor menším počtem řádků řádku.

Řešení

Oříznout obsah tak nezbývá než pomocí overflow: hidden.

.oriznuty {
  max-height: 5em;
  line-height: 1.25em;
  overflow: hidden;
}

Oříznutí vždy po celém řádku zajistí maximální výška (max-height) v hodnotě násobku výšky řádku (line-height). Kvůli zvětšování písma se hodí použít například jednotky em.

Kód z tohoto příkladu tak ořízne obsah po 4 řádcích (1.25em * 4 řádky = 5em).

Živá ukázka

Znázornění oříznutí

Na řešení výše bude nešikovná skutečnost, že uživatel nepozná, že je obsah oříznutý — zkrátka najednou skončí.

Zde se komplikovanost řešení zásadně liší na základě dvou případů:

  1. Text vždy přeteče výšku elementu.
  2. Text se občas vejde.

V prvním případě stačí do pravého dolního rohu absolutně naposicovat překryvný element s výpustkou ().

Aby byla jistota, že text neskončí kvůli zalomení řádku příliš brzy, je dobré překryvnému elementu nastavit větší šířku.

Oříznutí a překrytí

Jediný potenciální problém je tak useknutí uprostřed písmena.

Živá ukázka

Problémem useknutí uprostřed písmena netrpí překrytí plynulým obrázkových přechodem do ztracena – jde toho docílit pomocí CSS gradientu.

Živá ukázka

Neznámá délka textu

V případě, že se obsah někdy vejde a někdy ne, je situace komplikovanější. Chování vylepší naposicování překryvného elementu shora na poslední řádek. Když potom bude obsah vlivem krátkého obsahu nižší, element s výpustkou bude mimo oříznutý element a nebude vidět.

Živá ukázka s výpustkou / přechodem

Zobrazit více

Je-li dobré, aby se návštěvník k oříznutému obsahu mohl dostat, hodí se přidat odkaz Zobrazit více.

S trochou snahy by to šlo od IE 9 s využitím checkboxu a selektoru :checked ~ element vytvořit čistě v CSS:

Živá ukázka

Elegantnější ale vypadá řešení s trochou JavaScriptu:

Živá ukázka

Jediným nedostatkem je zobrazení zbytečného odkazu v případě, že text vyjde přesně na stanovený počet řádků. Tomu by šlo předejít zobrazením Zobrazit více přes celý poslední řádek.

Živá ukázka

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

CSS mapa s popisky

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Kreslení v CSS

„Kreslení“ pomocí CSS

Jak vytvářet jednoduché tvary místo obrázků prostým CSS?

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře