Dlouhé URL adresy se objevují v komentářích, chatech, administračních rozhraních i náhledech položek. Pokud je zobrazíme „holé“ (jako čistý text nebo jako text odkazu) v úzkém sloupci nebo v prvku s omezenou šířkou, mohou přetéct a rozbít layout.

Problém v praxi

Bez úprav se text odkazu nevejde do dané šířky a „teče“ ven.

Problém se ještě umocní, pokud má URL zákaz zalamování, například v elementu <code>. U běžné URL se však často najde spojovník nebo otazník, které standardně zalomení umožní.

U řady URL tak nemusí být vůbec problém, protože se přirozeně zalomí u znaků, jako jsou ? nebo -. Nejde na to ale spoléhat.

Monospace, nebo ne?

K úvaze je, zda URL zobrazovat proporcionálně, nebo neproporcionálně.

Neproporcionální zobrazení má výhodu, že je lépe čitelné pro podobné znaky – Il0O vs. Il0O. Na druhou stranu bývá ještě širší a často zbytečně odvádí pozornost.

CSS řešení

overflow-wrap: anywhere (šetrné)

Nejpohodlnější řešení, které dovolí zalomit kdekoliv, pokud jinak nelze zalomit přirozeně.

.url-long { overflow-wrap: anywhere; }

word-break: break-all (agresivní)

Vynucuje lámání i uprostřed slov, ale vůbec se nesnaží nezalamovat slova, pokud je to možné. Výhoda je, že se zalomený text nenatáhne na tolik řádků.

.url-long { word-break: break-all; }

Jednořádkové zkrácení s „…“

Pro tabulky, seznamy nebo karty, kde stačí náhled na jednom řádku.

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

Velká výhoda tohoto postupu je, že je text stále na stránce přítomný.

Takže jde na stránce najít přímo v prohlížeči a dozví se o něm i vyhledávače.

Flex kontejnery a tabulky

U flexboxu mohou položky bránit zmenšení své šířky. Řešení je min-width: 0.

.row { display: flex; gap: .5rem; }
.cell { min-width: 0; }
.cell a { overflow-wrap: anywhere; }

V tabulkách bývá nutné použít table-layout: fixed nebo nastavit max-width: 0 na buňku, viz Zalamování textu v tabulkách.

Chytré lámání na vybraných místech

Zajímavé řešení je vkládat do URL <wbr> za bezpečné oddělovače (/, ?, &, =).

<a href="#">https://example.com/<wbr>cesta/<wbr>podrobnosti?<wbr>parametr=<wbr>hodnota-dlouha</a>

Vyžaduje to více práce, ale minimalisuje to šanci zalomení uprostřed slova.

Zkrácení

Další možnost je zobrazovanou URL reálně zkrátit. Nabízí se různé varianty. Je dobré se rozhodnout podle konkrétní situace. Podle toho, co uživatel potřebuje vidět.

1. Zkrácení na konci:
   https://example.com/opravdu-hodne-dlouhy…
2. Zkrácení uprostřed:
   https://example.com/opravdu-hodne…arametr
3. Odstranění protokolu:
   example.com/opravdu-hodne-dlouhy-param…
4. Odstranění cesty:
   example.com
5. Nezobrazování URL:
   Odkaz

U reálného zkrácení může být problém při vyhledávání na stránce.

Náhled URL

Někdy se může hodit obejít problém náhledem stránky. Třeba zobrazit faviconu nebo logo firmy (využít Brandfetch).

Tooltip

Universální řešení všech problémů s místem je použít tooltip, kdy se nezkrácená plná URL zobrazí až po najetí myši.

Samozřejmě to má i své nevýhody a nehodí se to použít vždy. Zvlášť pokud je URL hodně důležité vidět nebo porovnávat s dalšími záznamy, tak je tooltip zbytečně obtěžující.

Možnost kopírování

Pro zachování uživatelské přívětivosti je vhodné nekomplikovat kopírování odkazu. U zkráceného odkazu toho jde snadno docílit ponecháním plné URL v atributu href, kdy jde snadno kopírovat přes kontextovou nabídku.

Alternativa je přidat tlačítko pro kopírování textu do schránky.

Odkazy jinam