CSS break-after ominaisuus

Määrittely ja käyttö

break-after-ominaisuus määrittää, tapahtuuko sivutus (page-break), sarjauudelleenjako (column-break) tai alueen jakaminen (region-break) määritetyn elementin jälkeen.

break-after-ominaisuus laajentaa CSS2:n page-break-after-ominaisuutta.

Käyttämällä break-after voit ilmoittaa selaajalle, että sivua, sarjaa tai aluetta tulisi katkaista elementin jälkeen, tai välttää elementin jakamisen kahden sivun välillä.

Esimerkki

Aseta aina <footer> -elementin eteen sivutusmerkki:

@media print {
  footer {
    break-after: always;
  }
}

CSS-kieli

break-after: auto|all|always|avoid|avoid-column|avoid-page|avoid-region|column|left|page|recto|region|right|verso|initial|inherit;

Ominaisuuden arvo

Arvo Kuvaus
auto Oletus. Suorita automaattisesti sivuttaminen, sarakkeiden erottelu ja alueen erottelu elementin jälkeen.
all Aseta aina pääasiallisen kehyslippaan jälkeen sivutusmerkkiä heti.
always Aseta aina elementin jälkeen sivutusmerkki.
avoid Vältä elementin jälkeen sivun, sarakkeen tai alueen katkaisua.
avoid-column Vältä elementin jälkeen sarakkeiden erottelua.
avoid-page Vältä elementin jälkeen sivuttamista.
avoid-region Vältä elementin jälkeen erottelua.
column Aseta aina elementin jälkeen sarakkeiden erotteluviiva.
left Lisää yksi tai kaksi sivutusmerkkiä elementin jälkeen, jotta seuraava sivu muotoillaan vasemmaksi sivuksi.
page Aseta aina elementin jälkeen sivutusmerkki.
recto Lisää yksi tai kaksi sivutusmerkkiä pääasiallisen kehyslippaan jälkeen, jotta seuraava sivu muotoillaan recto-sivuksi.
region Aseta aina elementin jälkeen erotteluviiva.
right Lisää yksi tai kaksi sivutusmerkkiä elementin jälkeen, jotta seuraava sivu muotoillaan oikeaksi sivuksi.
verso Lisää yksi tai kaksi sivutusmerkkiä pääasiallisen kehyslippaan jälkeen, jotta seuraava sivu muotoillaan verso-sivuksi.
initial Aseta tämä ominaisuus oletusarvoonsa. Katso: initial.
inherit Ota tämä ominaisuus käyttöön perimällä sitä isältä elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: auto
Perintä: Ei
Animaatioiden luominen: Ei tuettu. Katso:Animaatiotukiasetukset.
Versio: CSS3
JavaScript-kieli: object.style.breakAfter="always"

Lisää esimerkkejä

Esimerkki

Aseta aina id:n "toc" omaavan elementin jälkeen sivutusmerkki:

@media print {
  #toc {
    break-after: always;
  }
}

Esimerkki

Aseta aina alueen jälkeen erotteluviiva: <ul> -elementin jälkeen:

.region ul {
    break-after: region;
  }
}

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selausselaimen versio, joka tukee tätä ominaisuutta täysin.

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 65.0 10.0 37.0