Egenskapen overflow

Egenskapen overflow forteller nettleseren hvordan den skal håndtere innhold (tekst, bilder, andre blokker) som flyter utenfor grensene til blokken (utenfor dens bredde eller høyde). Nettleseren kan skjule den delen som flyter ut, legge til rullefelt eller ikke gjøre noe (la det være som det er - flytende utenfor grensene).

Syntaks

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

Verdier

Standardverdi: visible.

Eksempel . Verdien visible

I dette eksemplet vil et veldig langt ord ikke få plass i beholderen og vil flyte utenfor dens grenser. Klipping skjer ikke:

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

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

Результат:

Eksempel . Verdien visible

Nå er ikke bare bredden begrenset, men også høyden (teksten vil flyte utenfor blokken både i bredde og høyde):

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;
}

Результат:

Eksempel . Verdien hidden

Nå vil alt som flyter utenfor beholderens grenser blir kuttet av (både i høyde og bredde). Legg merke til at klipping i høyde skjer bare når den er eksplisitt satt. Ellers vil teksten utvide beholderen i høyde - og ingen klipping vil skje:

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;
}

Результат:

Eksempel . Verdien scroll

Med verdien scroll vil rullefelt vises alltid, selv om ingenting flyter ut (i så fall vil de være inaktive). Nå flyter ikke teksten ut verken i bredde eller høyde, men rullefelt er likevel til stede (inaktive):

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;
}

Результат:

Eksempel . Verdien auto

Med verdien auto legges rullefelt til bare hvis innholdet flyter ut utenfor beholderen. Nå er de ikke til stede, siden alt får plass:

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;
}

Результат:

Eksempel . Verdien auto

Nå begrenser vi bredden - en horisontal rullefelt vil vises:

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;
}

Результат:

Se også