Oříznutý text

Nález dostane prvek, který splňuje obě podmínky zároveň: v CSS skrývá přetok (overflow: hidden nebo clip) a jeho obsah je doopravdy širší, než kolik je vidět. Není to tedy odhad: prvek skutečně něco ukrývá.

Report rozlišuje dva případy a stojí za to je od sebe odlišit i při opravě: s výpustkou (text končí „…“, takže je aspoň poznat, že pokračuje) a bez indikátoru (text prostě zmizí uprostřed a nic to nenaznačí). To druhé je horší.

Měří se ve třech šířkách (390, 768, 1440 px) a závažnost se zvedá na kritickou, když se týž problém objeví na dost viewportech téže stránky. Tři měření se v reportu slučují do jednoho řádku.

Co kontrola nedělá: neposuzuje, jestli je oříznutí záměr (u víceřádkových výpisů bývá), nerozlišuje oříznutí o dva znaky od oříznutí o půl věty, a nevidí svislé oříznutí, jen vodorovné. Nález je na úrovni stránky, s anotovaným snímkem obrazovky.

Na viditelnost v odpovědích AI to vliv nemá, a stojí za to říct proč zrovna tady, protože se to plete: oříznutý text v HTML pořád je. Model i vyhledávač ho přečtou celý; skrývá ho až CSS v prohlížeči. Tenhle nález je tedy výhradně o lidech.

A o lidech je dost zásadně. Varianta bez výpustky je ta nebezpečná: návštěvník nemá jak poznat, že text pokračuje. Cena, která končí uprostřed čísla, název produktu bez podstatné části, adresa bez čísla popisného: to vypadá jako úplná informace a není.

Kde to bývá záměr a nález je planý poplach: jednořádkové výpisy, náhledy článků, dlaždice v katalogu. Tam se text ořezává vědomě a úplná verze je o klik dál. Proto nález ignorujte, když víte, že to tak má být.

Kde to záměr skoro nikdy není: tlačítka, nadpisy, položky navigace a hodnoty ve formulářích. Když se ořízne tlačítko, není poznat, co udělá, a to je vada bez ohledu na návrh.

Nejdřív rozhodněte, jestli má prvek text ořezávat. Podle toho jsou tři cesty:

1. Nemá ořezávat → odstraňte overflow: hidden a nechte text zalomit. U dlouhých slov a adres pomůže overflow-wrap: anywhere.
2. Má ořezávat, ale musí to být poznat → doplňte výpustku. Bez white-space: nowrap a text-overflow: ellipsis se výpustka nezobrazí.
3. Má ořezávat na víc řádcích → -webkit-line-clamp ukáže první tři řádky a zbytek naznačí.

/* Jeden řádek s výpustkou */
.nazev {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Tři řádky a pak výpustka */
.perex {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Dvě věci, na které u téhle opravy nezapomenout:

• Ořezaný text musí být dostupný jinde. Když se na dlaždici nevejde celý název, musí být v title, v detailu, nebo aspoň po najetí. Výpustka říká „je toho víc“; někde to víc musí být.
• Nikdy neořezávejte tlačítka a odkazy. Raději nechte popisek zalomit na dva řádky; tlačítko, u kterého není jasné, co dělá, je horší než tlačítko o pixel vyšší.