Aprakstiet tukšumus HTML un to izmantošanu.

HTML tukšumzīmes, kas arī sauktas par "whitespace", ir simboli, kurus pārlūkprogramma neparāda (tukšumi, tabulācijas, jauna rinda). Parasti pārlūkprogrammas tos sapludina vienā tukšumā attēlošanas laikā, izņemot noteiktus elementus un CSS īpašības.

Lietojums:

1. Koda lasāmības uzlabošana: Izstrādātāji izmanto tukšumus, lai vizuāli atdalītu elementus HTML kodā, padarot to skaidrāku un strukturētāku. Tas neietekmē lapas attēlošanu.

2. Rindu elementu atdalīšana: Pārlūkprogrammas automātiski pievieno tukšu vietu starp blakus esošām rindas elementiem HTML kodā. Šo uzvedību var mainīt ar CSS.

3. Elementi, kas saglabā tukšumus:

   • <pre>: Saglabā visus tukšumus un rindu pārtraukumus, formatējot tekstu tieši tā, kā tas ir uzrakstīts avota kodā.
   • <code>: Parasti tiek izmantots <pre> iekšienē, lai saglabātu koda formatējumu.
   • <textarea>: Teksta laukā saglabājas tukšumi un rindu pārtraukumi.

4. CSS īpašība white-space: ļauj kontrolēt, kā pārlūkprogramma apstrādā tukšumus:

   • normal (standarta): sapludina tukšumus, rindu pārtraukumi tiek ignorēti (izņemot <br>).
   • nowrap: sapludina tukšumus, bet neļauj rindu pārtraukumiem.
   • pre: atbilst <pre> funkcijai.
   • pre-wrap: saglabā tukšumus un rindu pārtraukumus, kā arī ļauj automātiski pārraut rindas pēc konteinera platuma.
   • pre-line: sapludina tukšumus, bet saglabā rindu pārtraukumus.

Tukšumu sapludināšanas piemērs:

HTML:

<p>
    Daudz        tukšumu

    un
    pārtraukumu
    rindās
</p>

Rezultāts pārlūkprogrammā:

Daudz tukšumu un pārtraukumu rindās

Ar <pre> izmantošanas piemērs:

HTML:

<pre>
    Saglabājas
        visi
            tukšumi
    un
    pārtraukumi
</pre>

Rezultāts pārlūkprogrammā:

    Saglabājas
        visi
            tukšumi
    un
    pārtraukumi

CSS white-space īpašības piemērs:

HTML:

<div class="pre-wrap">
    Šis teksts saglabās
        savus tukšumus
            un pārtraukumus

    rindas,
    kā arī tiks pārrauts pēc platuma.
</div>

CSS:

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