Pokud máte nějaký text, který může být dlouhý, ale vy máte jen omezený prostor (např. zobrazení uživatelského jména pod fotkou), můžete ho nechat automaticky oříznout a nechat prohlížeč doplnit trojtečku (ellipsis).

.ellipsis {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Všechny uvedené vlastnosti jsou potřeba a pokud třeba jen jednu z nich zapomenete, nebude oříznutí správně fungovat. Proč?

• Zobrazení prvku jako blok (příp. inline-block) je nutné, protože inline prvky se automaticky zvětšují podle obsahu a nic s tím nelze udělat.
• Overflow nařizuje, aby se prvky, které vytékají z kontejneru nezobrazili – díky tomu nebude text vytékat napravo.
• K tomu je potřeba doplnit vlastnost white-space, aby se text nezalomil a nezačal vytékat spodem – nastavením na nowrap zůstane vždy na jedné řádce nezávisle na mezerách.
• Poslední vlastnost pak říká, že text oříznutý při přetečení se má nahradit trojtečkou (ellipsis). Tahle vlastnost však nefunguje v IE a nebo pokud je prostor tak malý, že se do něj trojtečka prostě nevejde.

Všechny tyto odstavce obsahují stejné jméno, první se automaticky zvětšuje podle obsahu (zobrazí tedy celé „Michal“), druhý je oříznutý, ale není u něj použito doplnění trojtečky (proto vidíte jen „Micha“), třetí je stejně široký jako druhý, ale přidává na konec trojtečku („Mi…“). Poslední odstavec má sice nařízeno, aby trojtečku doplnil, ale je tak úzký, že se do něj trojtečka nevejde (proto raději místo trojtečky zobrazí počáteční písmena „Mic“).

SmartEllipsis

Pokud požadujete trochu složitější ořezávání, můžete použít můj jQuery plugin (založený na komunitním kódu) jQuerySmartEllipsis, který umožňuje přidat trojtečku i do víceřádkového textu (CSS white-space) a dokáže přidat trojtečku na konec slova (CSS word-wrap), narozdíl od prohlížečů, které ji vkládají klidně i doprostřed slova nebo dokonce za mezeru. Taktéž umí k textu přidat tooltip s původním textem.

Plugin je samozřejmě plně automatický, takže sám přidá trojtečku do elementů s CSS třídou ellipsis a automaticky je updatuje při změně velikosti okna nebo otočení obrazu.