Írja le a HTML-ben lévő szüneteket és azok használatát.

A HTML-ben lévő szóközök, más néven "whitespace" karakterek, olyan jelek, amelyeket a böngésző nem jelenít meg (szóközök, tabulátorok, új sor karakterek). A böngészők általában ezeket egyetlen szóközzé tömörítik a renderelés során, kivéve bizonyos elemeket és CSS tulajdonságokat.

Használat:

1. A kód olvashatóságának javítása: A fejlesztők szóközöket használnak az elemek vizuális elkülönítésére a HTML forráskódban, ezáltal könnyebben érthető és strukturált lesz. Ez nem befolyásolja az oldal megjelenését a böngészőben.

2. Sorok közötti elválasztás: A böngészők automatikusan szóközt tesznek az egymás mellett elhelyezett inline elemek közé a HTML kódban. Ezt a viselkedést CSS-sel lehet módosítani.

3. Szóközöket megőrző elemek:

   • <pre>: Minden szóközt és sortörést megőriz, pontosan úgy formázza a szöveget, ahogy a forráskódban van.
   • <code>: Általában <pre>-n belül használják a kód formázásának megőrzésére.
   • <textarea>: A szövegbeviteli mezőben a szóközök és sortörések megmaradnak.

4. CSS white-space tulajdonság: Lehetővé teszi, hogy szabályozzuk, a böngésző hogyan kezeli a szóközöket az elem belsejében:

   • normal (alapértelmezett): Összevonja a szóközöket, a sortöréseket figyelmen kívül hagyja (kivéve <br>).
   • nowrap: Összevonja a szóközöket, de megakadályozza a sortöréseket.
   • pre: Egyenértékű a <pre> tag használatával.
   • pre-wrap: Megőrzi a szóközöket és a sortöréseket, ugyanakkor automatikusan megtöri a sort a konténer szélessége szerint.
   • pre-line: Összevonja a szóközöket, de megtartja a sortöréseket.

Szóközök összefűzésének példája:

HTML:

<p>
    Sok        szóköz

    és
    sortörés
    van
</p>

Eredmény a böngészőben:

Sok szóköz és sortörés

Példa <pre> használatával:

HTML:

<pre>
    Szóközök
        megőrződnek
            pontosan
    és
    sortörések
</pre>

Eredmény a böngészőben:

    Szóközök
        megőrződnek
            pontosan
    és
    sortörések

CSS white-space példával:

HTML:

<div class="pre-wrap">
    Ez a szöveg megőrzi
        a szóközeit
            és a sortöréseket

    és automatikusan megtörik a sort a szélesség szerint.
</div>

CSS:

.pre-wrap {
    white-space: pre-wrap;
    border: 1px solid black;
    width: 150px;
}