CSS break-before ominaisuus

Määrittely ja käyttö

break-before ominaisuus määrittää, tapahtuuko sivutus (page-break), sarakekeskeytys (column-break) tai aluekeskeytys (region-break) ennen määritettyä elementtiä.

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

Käyttämällä break-before voit ilmoittaa selaimeen, että sivutus, sarake tai alue tulisi keskeyttää ennen break-after-ominaisuutta sisältävää elementtiä, tai välttää elementin jakamisen ja siirtämisen kahden sivun välillä.

Esimerkki

Aseta sivutusmerkki aina ennen <h1> -elementtiä:

@media print {
  h1 {
    break-before: always;
  }
}

CSS kieli

break-before: 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 sivutus, sarakkeiden asettaminen ja alueiden asettaminen elementin eteen.
all Aseta aina sivutusmerkki (page-break) heti ennen pääasiallista ruutua.
always Aseta aina sivutusmerkki (page-break) ennen elementtiä.
avoid Vältä sivu-, sarakkeiden ja alueiden katkaisujen asettamista ennen elementtiä.
avoid-column Vältä sarakkeiden asettamista ennen elementtiä.
avoid-page Vältä sivutusmerkkiä ennen elementtiä.
avoid-region Vältä alue-erottimien asettamista elementin eteen.
column Aseta aina sarakkeiden erottimet ennen elementtiä.
left Lisää yksi tai kaksi sivutusmerkkiä ennen elementtiä, jotta seuraava sivu muotoillaan vasemmaksi sivuksi.
page Aseta aina sivutusmerkki ennen elementtiä.
recto Lisää yksi tai kaksi sivutusmerkkiä ennen pääasiallista ruutua, jotta seuraava sivu muotoillaan recto-sivuksi.
region Aseta aina alue-erottimet ennen elementtiä.
right Lisää yksi tai kaksi sivutusmerkkiä ennen elementtiä, jotta seuraava sivu muotoillaan oikeaksi sivuksi.
verso Lisää yksi tai kaksi sivutusmerkkiä ennen pääasiallista ruutua, jotta seuraava sivu muotoillaan verso-sivuksi.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial。
inherit Periisi tämän ominaisuuden vanhemmalta elementiltä. Katso: inherit。

Tekninen yksityiskohta

Oletusarvo: auto
Perintä: Ei
Animaation tekeminen: Ei tuettu. Katso:Animaatioon liittyvät ominaisuudet。
Versio: CSS3
JavaScript-kieli: object.style.breakBefore="always"

Lisää esimerkkejä

Esimerkki

Varmistaaksesi, että kaikki uudet luvut aloitetaan oikeasta sivusta tulostettaessa (esim. kirjassa), voit käyttää break-before: :a kaikille <h1>-elementeille:

@media print {
  h1 {
    break-before: right;
  }
}

Esimerkki

Aseta aina region-tyylin <ul>:lle region-break:

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

Selaimen tuki

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

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