Īpašība overflow

Īpašība overflow norāda pārlūkprogrammai, kā rīkoties ar saturu (teksts, attēli, citi bloki), kas izkļūst ārpus bloka robežām (ārpā tā platuma vai augstuma). Pārlūkprogramma var paslēpt izkritusšo daļu, pievienot ritjoslas vai neko nedarīt (atstāt kā ir - izkritusšu ārpus robežām).

Sintakse

cssselektors {
  overflow: hidden | scroll | auto | visible;
}

Vērtības

Noklusējuma vērtība: visible.

Piemērs . Vērtība visible

Šajā piemērā ļoti garš vārds neietilps konteinerā un izkļūs ārpus tā robežām. Apgriešana nenotiek:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: visible;
  border: 1px solid red;
  width: 200px;
}

Результат:

Piemērs . Vērtība visible

Bet tagad ir ierobežots ne tikai platums, bet arī augstums (teksts izkļūs ārpus bloka arī pēc augstuma):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  height: 40px;
  overflow: visible;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

Piemērs . Vērtība hidden

Tagad viss, kas izkļuvis ārpus konteinera robežām, tiks vienkārši apgriezts (arī pēc augstuma). Pievērsiet uzmanību tam, ka apgriešana pēc augstuma notiek tikai tad, kad tas ir skaidri norādīts. Pretējā gadījumā teksts paplašina konteineru pēc augstuma - un nekādas apgriešanas nebūs:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: hidden;
  width: 200px;
  height: 40px;
  border: 1px solid red;
}

Результат:

Piemērs . Vērtība scroll

Ar vērtību scroll ritjoslas būs vienmēr, pat ja nekas neizkļūst (šajā gadījumā tās būs neaktīvas). Tagad teksts neizkļūst ne pēc platuma, ne pēc augstuma, bet ritjoslas joprojām ir (neaktīvas):

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: scroll;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Piemērs . Vērtība auto

Ar vērtību auto ritjoslas tiek pievienotas tikai tad, ja saturs izkļūst ārpus konteinera. Tagad tādu nav, jo viss ietilpst:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: auto;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Piemērs . Vērtība auto

Bet tagad ierobežosim platumu - parādīsies horizontālā ritjosla:

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  height: 100px;
  border: 1px solid red;
}

Результат:

Skatiet arī