Szóköz

Word-spacing tulajdonság

A word-spacing tulajdonság a szavak közötti távolságot, vagyis a szóközök méretét határozza meg. Lehetséges értékei:
Érték Leírás
normal: a font vagy a böngésző által meghatározott normál szóközt jeleníti meg
(hossz): meghatározza, hogy mekkorák legyenek a szóközök a normál értéken túl. Negatív értéket is megadhatunk.
Példa 1 - Szóköz

A forráskód részlet:

<p style="word-spacing: 0.8em;">A szóközök növelésére (vagy csökkentésére) általában nincs szükség. A csupa nagybetűvel írt szövegeknél célszerű viszont egy kicsit megnövelni a szóközöket (0.1–0.2 em távolsággal) a jobb olvashatóság érdekében</p>

Az eredmény:

A szóközök növelésére (vagy csökkentésére) általában nincs szükség. A csupa nagybetűvel írt szövegeknél célszerű viszont egy kicsit megnövelni a szóközöket (0.1–0.2 em távolsággal) a jobb olvashatóság érdekében.

White-space tulajdonság

A white-space tulajdonság határozza meg, hogyan legyenek kezelve az elemen belüli whitespace karakterek (ezek CSS esetében a szóköz, a tabulátor, a soremelés, a kocsi vissza és a lapdobás).

Érték Leírás
normal: összevonja a whitespace-ek sorozatát, a szöveget pedig úgy töri, hogy az kitöltse a sordobozokat
pre: a közök nem kerülnek összevonásra, sortörés csak ott jön létre, ahol a forrásban is új sor kezdődik
nowrap: szintén összevonja a közöket, de megtiltja a szövegen belüli sortörést.
pre-wrap (CSS2.1-től) nem vonja össze a közöket; sortörés ott jön létre, ahol a forrásban új sor kezdődik, vagy ott, ahol a sordoboz kitöltése érdekében szükséges.
pre-line (CSS2.1-től) A összevonja a közöket; a sorok ott törnek, ahol a forrásban új sor kezdődik, vagy ott, ahol a sordoboz kitöltése érdekében szükséges.
Példa 2 - white-space:normal;

A forráskód részlet:

<p style="white-space: normal;"> Itt elhelyezek mos t öt darab szóközt (space) , majd két darab soremelést (enter) és itt folytatom tovább három tabulátorral. </p>

Az eredmény:

Itt elhelyezek mos t öt darab szóközt (space) , majd két darab soremelést (enter) és itt folytatom tovább három tabulátorral.

Magyarázat: a normal érték összevonja a whitespace-ek sorozatát, a szöveget pedig úgy töri, hogy az kitöltse a sordobozokat


Példa 3 - white-space:pre;

A forráskód részlet:

<p style="white-space: pre;"> Itt elhelyezek mos t öt darab szóközt (space) , majd két darab soremelést (enter) és itt folytatom tovább három tabulátorral. </p>

Az eredmény:

Itt elhelyezek mos t öt darab szóközt (space) , majd két darab soremelést (enter) és itt folytatom tovább három tabulátorral.

Magyarázat: a pre érték estén a közök nem kerülnek összevonásra, sortörés csak ott jön létre, ahol a forrásban is új sor kezdődik. A pre használata alkalmas lenne speciálisan formázott szövegek, pl. versek megjelenítésére, de sajnos a tulajdonságnak ezt az értékét nem minden böngésző támogatja.


Példa 4 - white-space:no-wrap;

A forráskód részlet:

<p style="white-space: no-wrap;"> Itt elhelyezek mos t öt darab szóközt (space) , majd két darab soremelést (enter) és itt folytatom tovább három tabulátorral. </p>

Az eredmény:

Itt elhelyezek mos t öt darab szóközt (space) , majd két darab soremelést (enter) és itt folytatom tovább három tabulátorral.

Magyarázat: a nowrap érték estén összevonja a közöket, de megtiltja a szövegen belüli sortörést. A nowrap használatával vigyáznunk kell, mert már egy, a forráskódban néhány soros bekezdés is egyetlen hosszú sorként jelenik meg a képernyőn, és a kinyomtatása is lehetetlenné válik. Nagyobb szövegekre vagy az oldal egészére ezért ne alkalmazzuk. Csak olyankor használjuk, amikor egy-egy konkrét szövegrészt, pl. forráskódot vagy URL-t szeretnénk sortörés nélkül megjeleníteni.


Példa 5 - white-space:pre-wrap;

A forráskód részlet:

<p style="white-space: pre-wrap;"> Itt elhelyezek mos t öt darab szóközt (space) , majd két darab soremelést (enter) és itt folytatom tovább három tabulátorral. </p>

Az eredmény:

Itt elhelyezek mos t öt darab szóközt (space) , majd két darab soremelést (enter) és itt folytatom tovább három tabulátorral.

Magyarázat: a pre-wrap nem vonja össze a közöket; sortörés ott jön létre, ahol a forrásban új sor kezdődik, vagy ott, ahol a sordoboz kitöltése érdekében szükséges.


Példa 6 - white-space:pre-line;

A forráskód részlet:

<p style="white-space: pre-line;"> Itt elhelyezek mos t öt darab szóközt (space) , majd két darab soremelést (enter) és itt folytatom tovább három tabulátorral. </p>

Az eredmény:

Itt elhelyezek mos t öt darab szóközt (space) , majd két darab soremelést (enter) és itt folytatom tovább három tabulátorral.

Magyarázat: a pre-line összevonja a közöket; a sorok ott törnek, ahol a forrásban új sor kezdődik, vagy ott, ahol a sordoboz kitöltése érdekében szükséges.

ugrás a lap tetejére