CSS nabízí dělení slov pomocí word-wrap: word-break, ale tato možnost rozdělí slovo přesně tam, kde končí řádek. Což pak v běžném textu nevypadá dobře a hlavně negramaticky.

Tento dlouhý text se nev
ejde na jeden řádek a pr
oto bude rozdělen na tři.

Od roku 1999 ale existuje Unicode a HTML specifikace, která umožňuje vložit do textu tzv. neviditelné mezery (zero-width space), které označí místa, kde je možno slovo rozdělit a přitom se nezobrazí, pokud je slovo na jedné řádce. Alternativnou je pak měkký rozdělovník (soft hyphen), který kromě rozdělení slova vloží na konec řádky pomlčku, která se běžně používá pro rozdělení slov.

Tento dlouhý text se neve-
jde na jeden řádek a pro-
to bude rozdělen na tři.

V Unicode jde o znaky U+200B (mezera) a U+00AD (rozdělovník), kde mezeru můžete do HTML vložit pomocí entity &#8203; nebo tagu <wbr> (word break) a rozdělovník pomocí entit &#173; nebo &shy; (soft hyphen).

Ve Windows můžete měkký rozdělovník vložit do textu, pokud podržíte levý ALT a na numerické klávesnici (při zapnutém NumLock) stisknete (postupně) 0, 1, 7 a 3 (tedy ALT + 0173). Je důležité jako první stisknout nulu, aby Windows poznaly, že chcete vkládat Unicode znak (v opačném případě by vložili ANSI znak, což může být španělský vykřičník, turecké š, apod. podle verze Windows).

Ten­to dlou­hý text se ne­ve­jde na je­den řá­dek a pro­to bu­de roz­dě­len na tři.

Pozor na to, že pokud budete takový text vkládat do HTML pomocí jQuery (nebo podobné knihovny), metoda text() nahradí entity a ty se přímo zobrazí. Aby volitelný rozdělovník správně zafungoval, musíte ho do DOMu vložit metodou html() nebo přímo použít Unicode znak.

//zobrazí entity místo rozdělovníků:
//NEPOUŽÍVAT!!!
$('#text').text('Dlou­hý te­xt');

//správně zobrazí entity:
$('#text').html('Dlou­hý te­xt');

//použití textu s unicode rozdělovníky:
$('#text').text('Dlou­hý te­xt');
$('#text').text().length; // = 13
//vrátí 13 znaků, i když obsahuje jen
//10 viditelných písmen a mezeru
//Rozdělovník napíšete ALT + 0173 (NumPad)

$('#text').text('Dlou\u00ADhý te\u00ADxt');
//Alternativa s vložením unicode znaku
//pomocí kódu

Ten­to­Od­sta­vec­Má­Slo­va­Od­dě­le­na­Vo­li­tel­ným­Roz­dě­lov­ní­kem­A­Na­víc­Je­Roz­dě­lov­ník­Do­pl­něn­Do­Dlou­hých­Slov­Tak­že­Se­Na­Kon­ci­Řád­ku­Roz­dě­lí­Správ­ně­­I­Uprostřed­Slov.

Zkuste změnit velikost okna prohlížeče nebo otočit displej telefonu nebo tabletu, abyste viděli, že text se pokaždé zalomí jinde.

Alternativně můžete doplnit dlouhý text o zkrácení trojtečkou.

Řízení přes CSS

Vložené rozdělovníky můžete ještě dále řídit pomocí CSS vlasnosti hyphens, která má hodnoty none, manual a auto.

Hodnota none znamená, že prohlížeč bude neviditelné mezery a rozdělovníky ignorovat. Lze tedy použít v případě, že máte texty připravené s nimi ale někde text rozdělovat nechcete (např. uvnitř v nadpisech nebo prvku code). Hodnota manual znamená, že prohlížeč bude rozdělovat slova pouze tam, kde najde neviditelnou mezeru nebo rozdělovník.

Hodnota auto pak znamená, že prohlížeč může využít vlastní slovník a rozdělovníky doplnit i tam, kde v textu nejsou. Český slovník je ale přítomen pouze v IE10+ a prohlížeče založené na Webkit (Safary, Chrome, Opera, atd.) a Gecko (Firefox apod.) tuto hodnotu ignorují.

Výchozí hodnota pro hypnes je buď auto tam, kde je to podporováno (tedy IE10+), nebo manual (ostatní prohlížeče). Nastavovat hodnotu na auto tedy nemá smysl, protože to si prohlížeče ohlídají sami. Smysl mají hodnoty manual, pokud chcete vypnout automatické rozdělení (např. protože máte speciálně připravené texty pro responzivní layout), nebo none, pokud chcete rozdělení kompletně vypnout.

Aktualizace: Chrome a Firefox mohou podporovat hodnotu auto, ale pouze v kombinaci s word-wrap: word-break a jen pokud je správně nastavena hodnota lang, aby věděli, jaký slovník na slova použít (a samozřejmě je potřeba stáhnout i správnou jazykovou verzi, aby daný slovník obsahovala):

<p style="
       -webkit-hyphens: auto;
       -moz-hyphens: auto;
       hyphens: auto; 
       word-wrap: break-word
   "
   lang="cs-CZ">
Slovo "nejnerozdělitelnější"
se může právně rozdělit.
</p>

Overflow-wrap a word-break

Nové CSS3 nabízí ještě jednu vlastnost a tou je vynucené rozdělení dlouhého řetězce znaků (např. URL), aby se zabránilo jejich vytečení z kontejneru. Specifikace CSS3 definuje vlastnost jako overflow-break: anywhere, ale momentálně je podporována jen ve Firefox 65+. Nicméně Internet Explorer podporuje již od verze IE5.5 (ze které CCS3 specifikace vychází) stejnou funkci pod jménem word-break: break-word. Prohlížeče Chrome a Firefox podporují s hodnotu break-all a to jak pro break-word (Chrome 1+, Firefox 3.5+) tak i overflow-break (Chrome 23+, Firefox 49+):

p {
     word-break: break-word //IE a Safari
     word-break: break-all //Chrome a Firefox
     overflow-break: break-word //Chrome a Firefox
     overflow-break: anywhere //CSS3 
}

Výchozí hodnota overflow-break i word-break je normal, což znamená, že dlouhá slova se nebudou dělit, pokud to není povoleno vlastností word-wrap: break-word nebo hyphens: auto. Vlastnost CSS3 pak ještě nabízí hodnotu keep-all, která je ale použitelná jen pro čínštinu, japonštinu a korejštinu (tzv. CJK jazyky), pro které vypíná word-wrap: break-word (protože vložení mezery mezi dva čínské znaky může změnit význam slova nebo věty; např 女兒 znamená dcera, zatímco s mezerou 女 兒 je to dívka), a pro ostatní jazyky se chová jako normal.

Online tool

Pro doplnění neviditelných měkkých rozdělovníků do textu můžete použít můj online nástroj Shy – The hyphenation tool.