O webu
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