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.

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

• Řešení čistě v CSS – využívá triku s pomocí obtékání
• jquery.autoellipsis – Plugin do jQuery
• Diskuse na JPW