Jak na dlouhá "slova" na webu?

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

• html - How to word-break text in a flex display when the text is long? - Stack Overflow
• Flexbox and Truncated Text | CSS-Tricks

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

• Dealing with long words in CSS | justmarkup
• Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc) | CSS-Tricks
• hyphens | CSS-Tricks
• CSS Hyphens Not Working in Firefox? - Stack Overflow
• CSS hyphens property

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

• Soft hyphen - Wikipedia
• text - Soft hyphen in HTML (<wbr> vs. &shy;) - Stack Overflow
• wbr na www.quirksmode.org

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.

• <wbr> - HTML: HyperText Markup Language | MDN
• Can I use... Support tables for HTML5, CSS3, etc
• What is <wbr> in HTML5? Why do we need this? - Quora

Dřív se toto nahrazovalo využitím třeba tenké mezery &thinsp;. I další entity, jako třeba &zwnj; a &zwj; můžou najít uplatnění.

• hyphenation - HTML: Soft hypen (&shy;) without dash? - Stack Overflow
• Special Characters [Robin’s HTML 4.0 Conformance Test]
• The Little-Known Preview Text Hack You May Want to Use in Every Email – Litmus Software, Inc.
• &ZWNJ;&NBSP; Preview text hack > Litmus
• Zero-width non-joiner - Wikipedia
• Zero-width space - Wikipedia

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.