Unwanted breakline behavior - general explanation - html

Question

I have experienced cross-browser problem that a line on a page in a narrow column is breaked too early despite the space left where the last word could easily fit.
Firstly I thought there is something wrong with my stylesheet but it looks the same in a simple fiddle which I created (no php tags, no line-breakers, etc.):
I am sorry as it's in Czech Language but for demo purpose I hope it's ok.
It shows the same bug in FF,IE and Chrome on Win7 and Win8, even on iPad.
Link to fiddle: http://jsfiddle.net/Grows/q9wqeu14/1/
Demo:
HTML:
<div class="column">
<p>Jsme tým zkušených profesionálů, který Vám pomůže s kompletním IT řešením. Spravujeme IT techniku jak menším firmám do deseti uživatelů, tak i velkým společnostem se stovkami stanic a desítkami serveů. Náklady na externí správu sítě jsou zcela individuální a závisí na rozsahu sítě (počet serverů, stanic, aktivních prvků apod.), dohodnuté frekvenci návštěv a garantované době servisních zásahů. U menších firem se tato částka obvykle pohybuje v jednotkách tisíců korun měsíčně, takže se určitě vyplatí více, než zaměstnávat vlastního správce sítě.</p>
</div>
<div class="column">
<ul>
<li>Individuální přístup a vstřícnou péči o uživatele výpočetní techniky</li>
<li>Pravidelnou údržbu výpočetní techniky - minimalizují se její výpadky</li>
<li>Garanci servisního zásahu - minimalizuje ztráty způsobené výpadkem</li>
<li>Řízení IT procesů - provozujeme systém HELPDESK pro hlášení servisních požadavků, telefonickou linku HOT-LINE a automatický monitorovací systém NAGIOS, který nepřetržitě monitoruje chod Vašich klíčových zařízení</li>
<li>Poradenství a konzultační služby</li>
</ul>
</div>
<div class="column">
<ul>
<li>Finanční úspora - IT specialistu využíváte jen tehdy, je-li to potřeba. Ušetříte na mzdových nákladech, odborných školeních apod.</li>
<li>Flexibilita - služba je smluvně garantovaná, nemusíte řešit nemoci, dovolené, zástupy apod.</li>
<li>Profesionalita - pracujeme v týmu, máme zkušenosti, kvalitní technické zázemí a podporu našich dodavatelů. Jsme schopni minimalizovat rizika výpadku sítě či je zkrátit na minimum.</li>
<li>Přenesení zodpovědnosti za bezproblémový chod Vaší sítě na dodavatele</li>
</ul>
</div>
CSS:
body {
font-size: 14px; font-family: 'Arial'; text-align: left;
}
.column {
width: 214px; border: 1px black solid;
}
li {
list-style-type: disc; list-style-position: outside;
}
What me and both my client see is the weird break between 3rd and 4th row but also in more text.
I tried to search similar questions here and Google it but no success.
Is this a standard browser behavior or there is something wrong?
I really don't want to use manual line-breakers like br, wbr, nbsp, etc.
Thanks a lot!
Cheers, Martin
---- UPDATED ----
Thanks for the given solutions guys so far.
There are no white-spaces of any kind it's just pure text, so I can't remove any.
Also it must stay in three divs.
I guess it's some weird behavior of czech language in browser but I didn't see something like this before.
Maybe I can't do anything with it and this could be an answer too :)
---- SOLVED ---
Emmanuel was right.
There was something weird with some space characters. When I deleted them and typed space again, it dissapeared. Thank you so much! If someone explain this to me I would be very happy because in the source-code there weren't any visible "white-space" like tags...

Answer 1

See Remove non breaking space from <h4>. In your editor, search for non-breaking spaces if you know how to do that, turn on a mode which displays them, or do a search-and-replace of non-breaking spaces with regular old sp0aces.

Answer 2

Remove second and third div like this:
<div class="column">
<p>Jsme tým zkušených profesionálů, který Vám pomůže s kompletním IT řešením. Spravujeme IT techniku jak menším firmám do deseti uživatelů, tak i velkým společnostem se stovkami stanic a desítkami serveů. Náklady na externí správu sítě jsou zcela individuální a závisí na rozsahu sítě (počet serverů, stanic, aktivních prvků apod.), dohodnuté frekvenci návštěv a garantované době servisních zásahů. U menších firem se tato částka obvykle pohybuje v jednotkách tisíců korun měsíčně, takže se určitě vyplatí více, než zaměstnávat vlastního správce sítě.</p>
<ul>
<li>Individuální přístup a vstřícnou péči o uživatele výpočetní techniky</li>
<li>Pravidelnou údržbu výpočetní techniky - minimalizují se její výpadky</li>
<li>Garanci servisního zásahu - minimalizuje ztráty způsobené výpadkem</li>
<li>Řízení IT procesů - provozujeme systém HELPDESK pro hlášení servisních požadavků, telefonickou linku HOT-LINE a automatický monitorovací systém NAGIOS, který nepřetržitě monitoruje chod Vašich klíčových zařízení</li>
<li>Poradenství a konzultační služby</li>
</ul>
<ul>
<li>Finanční úspora - IT specialistu využíváte jen tehdy, je-li to potřeba. Ušetříte na mzdových nákladech, odborných školeních apod.</li>
<li>Flexibilita - služba je smluvně garantovaná, nemusíte řešit nemoci, dovolené, zástupy apod.</li>
<li>Profesionalita - pracujeme v týmu, máme zkušenosti, kvalitní technické zázemí a podporu našich dodavatelů. Jsme schopni minimalizovat rizika výpadku sítě či je zkrátit na minimum.</li>
<li>Přenesení zodpovědnosti za bezproblémový chod Vaší sítě na dodavatele</li>
</ul>
</div>

Answer 3

You just need word-break: break-all; style to column. WORKING CODE

Answer 4

If you look specifically at:
řešením. Spravujeme
in a HEX editor, the "space" between the '.' and 'S' is actually 2 bytes:
C2 A0
C2A0 is a non-breaking space in UTF-8 HEX and a "normal" breaking space is HEX 20.
Since this is a non-breaking space, the browser doesn't consider it a valid point to break the word to line-wrap.