Ylivuoto

Näiden lyhennettyjen apuohjelmien avulla voit määrittää nopeasti, kuinka sisältö ylittää elementin.

Säädä overflowominaisuutta lennossa neljällä oletusarvolla ja luokalla. Nämä luokat eivät ole oletusarvoisesti reagoivia.

Tämä on esimerkki käytöstä .overflow-autoelementissä, jonka leveys- ja korkeusmitat on asetettu. Suunnittelun mukaan tämä sisältö rullaa pystysuunnassa.

Tämä on esimerkki käytöstä .overflow-hiddenelementissä, jonka leveys- ja korkeusmitat on asetettu.

Tämä on esimerkki käytöstä .overflow-visibleelementissä, jonka leveys- ja korkeusmitat on asetettu.

Tämä on esimerkki käytöstä .overflow-scrollelementissä, jonka leveys- ja korkeusmitat on asetettu.

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-visible">...</div>
<div class="overflow-scroll">...</div>

Käyttämällä Sass-muuttujia voit mukauttaa ylivuotoapuohjelmia muuttamalla $overflowsmuuttujaa kohdassa _variables.scss.

Sass

Utilities API

Ylivuotoapuohjelmat on ilmoitettu utilities API:ssa scss/_utilities.scss. Opi käyttämään apuohjelmien sovellusliittymää.

    "overflow": (
      property: overflow,
      values: auto hidden visible scroll,
    ),