Elválasztó karakterek kezelése

A white-space tulajdonság értékével megadható, hogy a böngésző miként kezelje a forrásszövegben található szóköz, sortörés és tabulátor karaktereket.

normal=max. egy szóköz a többi elválasztó karaktert nem veszi figyelembe.
pre=előformázott szöveg. Minden elválasztó karaktert megjelenít.
pre-line=összevonja az elválasztó karaktereket, de a sortörést nem szűri ki és sorokat automatikusan töri.
pre-wrap=megtartja a szóközöket, sortöréseket, és sorokat automatikusan töri.
nowrap=összevonja az elválasztó karaktereket, és a sortörést kiszűri.

A szóköz beállítása:

kijelölő

{

white-space

kulcsszó;

}

Példa:

Forráskód


<style>
    div {width: 360px; border:1px solid blue; 
            margin:1px}
    .div1 {white-space:normal;}
    .div2 {white-space:pre;}
    .div3 {white-space:pre-line;}
    .div4 {white-space:pre-wrap;}
    .div5 {white-space:nowrap;}  
</style>
...
<body>            
  <div class="div1">
     normál: max.     egy szóköz a    többi elválasztó 
     karaktert nem veszi     figyelembe.
  </div>  
  <div class="div2"> pre: előformázott szöveg. 
     Minden elválasztó            karaktert megjelenít.
  </div>
  <div class="div3">pre-line: összevonja az elválasztó karaktereket, 
     de a sortörést nem szűri ki és sorokat automatikusan töri.
  </div>     
  <div class="div4"> pre-wrap: megtartja a 
     szóközöket, 
      sortöréseket, és sorokat automatikusan töri.      
  </div>     
  <div class="div5"> 
     nowrap: összevonja az       elválasztó 
     karaktereket, és a sortörést kiszűri
  </div>     
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_szoveg_elvalasztokarakter_01.html