Jsou věci, co se vrací jako bumerang. Třeba potřeba se popasovat s nezalomitelným textem, respektive dlouhými slovy. Přesněji
"slovy". V praxi jde, pokud nebudeme brát v potaz Němčinu, o emailové a webové adresy a parametry notebooků a telefonů, které produktový manažeři s oblibou naperou do názvu, oddělené lomítky a bez dostatky mezer, na kterých by se text mohl v prohlížeči zalomit. Samozřejmě tyto nešvary se připomenou až s vyladěným layoutem (jsem si myslel) a ostrými daty.
První věc, která opravdu nejde ignorovat. Dlouhé
"slovo" rozstřelí layout ve
flex-boxu. Boxíky postižených produktů se roztáhnou. Zafunguje malé kouzlo. Stačí nastavit na item ve flexu
min-width: 0;
Minimální šířka nemusí být nulová, ale musí být definovaná. Více
Pak to chce nějak ošetřit samotný text. Při googlení je potřeba zohledňovat stáří rad a návodů. Co platilo před rokem dnes už neplatí, nebo nemusí platit. V CSS lze nastavit
pravidla pro dělení a zalamování slov. V kombinaci s
media query jde o dobrou pojistku zachování funkčního layoutu a čitelného textu. Použijme třeba podle
Dealing with long words in CSS | justmarkup něco jako
.hyphenate {
overflow-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
Více
Na všechno styly ale nestačí. Správnému dělení slov pomůžeme znakem
měkké dělení. Hojně se řeší, jakou formu zápisu znaku volit, ale aktuálně by to mělo být použití entity
­
Pročti si
Rovnou jsme se dostali i k HTML5 tagu
<wbr>
který slouží k označení místa, kde se může v případě potřeby text zalomit, ale bez
"-". To je přesně to, co je dobré vrazit za výše zmíněná lomítka v názvech.
Dřív se toto nahrazovalo využitím třeba tenké mezery
 . I další entity, jako třeba
‌ a
‍ můžou najít uplatnění.
Obecně se řešení problémů s dlouhým textem věnuje článek
Handling Long and Unexpected Content in CSS | CSS-Tricks.
Toto neberte jako přesný návod, spíš soupis poznámek k navedení, kde hledat nápovědu k dané problematice.
