Lomljenje besed v spletnih vsebinah je naraven pojav. Če smo si lahko pred dobo odzivnega oblikovanja (RWD) še pomagali z vrinjenimi je zgodba sedaj drugačna. Vrinjeni “break” je običajno primeren le za določen pogled pri vseh ostalih pa se začne ta metoda podirati in se kaže, kot presledek oz. napaka.

Vedno pa obstajajo izjeme, ko kljub zakonitostim RWD, kjer nimamo vpliva na prelom besedila, saj je ta odvisen od naprave uporabnika, osebnih nastavitev, povečav ali pomanjševanj, …želimo, da se določene besede ne lomijo. To lahko storimo s pomočjo CSS znalke “white-space”.

CSS značka “white-space” za kontroliranje prelomov

CSS značka “white-space” kontrolira kako se obnaša prazen prostor znotraj elementa na katerega se nanaša. Na voljo imamo več vrednosti, najbolj uporabne so:

• normal (normalen prikaz)
• nowrap (besedilo se ne prelomi, dokler ne zasledi značke besedilo se lahko skrije, če je predolgo, presledkov v novo vrstico ne upošteva)
• pre (upošteva presledke v novo vrstico – line breaks)

Več informacij CSS white-space Property.

V našem primeru bomo preprečevanje lomljenja besed uporabili značko “white-space:nowrap”. Značko pa moramo dodeliti le nizu, ki ga ne želimo deliti. Eden izmed načinov je, da želeni niz zapakiramo v značko .

Primer za preprečevanje lomljenja besed

Lorem ipsum <span style="white-space: nowrap;">dolor sit amet</span>, consectetur adipiscing elit.

Stil, lahko skrijemo tudi v CSS class, tako bo naša koda lepša in bolj konsistentna.