Rivinvaihto - CSS-temppuja | CSS-almanakka 2025

CSS- line-breakominaisuus määrittelee kuinka tiukasti noudattaa sääntöjä tekstin käärimiselle uusille riveille, erityisesti työskenneltäessä symboleiden ja välimerkkien kanssa kiinan, japanin tai korean (CJK) kirjoitusjärjestelmissä. Se sisältyy CSS-tekstimoduulin tason 3 määrittelyyn, joka on tällä hetkellä editorin luonnoksessa.

.element ( line-break: strict; )

Demo

Syntaksi

line-break: auto | loose | normal | strict | anywhere;

Varhainen: auto
Koskee kaikkia elementtejä
Peritty: kyllä
Laskettu arvo: määritelty
Animaation tyyppi: erillinen

Arvot

/* Keyword values */ line-break: auto; line-break: loose; line-break: normal; line-break: strict; line-break: anywhere; /* Global values */ line-break: inherit; line-break: initial; line-break: unset;

auto: Tämän avulla selain voi päättää, miten se toteuttaa rivinvaihdot. Jokainen selain voi poiketa kriteereistään tekijöiden, mukaan lukien linjan pituus, perusteella.
loose: Tämä on kevyin linjarikkomissääntöjen täytäntöönpano. Specifikti mainitsee lyhyitä tekstirivejä, kuten sanomalehdessä mahdollisesti esiintyvät tekstirivit, esimerkkinä, missä tätä arvoa voidaan käyttää.
normal: Tämä rikkoo tekstirivit "yleisimmän" sääntöjoukon perusteella. (Huomaa, että yleisimpiä sääntöjä ei ole määritelty tai mitä ne saattavat sisältää.)
strict: Tämä pakottaa tiukimmat säännöt rivinvaihdoille.
anywhere: Tämä arvo mahdollistaa pehmeän rivityksen mahdollisuudet, jotka sallivat tekstin hajoamisen välilyönneissä tai välimerkkeissä pelkästään sanarajan sijasta. Se on ihanteellinen kielille, jotka eivät välttämättä käytä välilyöntejä tai välimerkkejä sanojen erottamiseen. Specs sanoo, että CSS ei määritä pehmeän rivityksen mahdollisuuksia, ja tämä arvo tunnistaa ja hyödyntää niitä soveltamaan rivinvaihtosääntöjä. Tekniset tiedot kuvaavat tekstin käärimiskäyttäytymistä kuten mitä yleensä näemme päätelaitteessa.

Spesifikaatio huomauttaa myös, että anywherearvo sallii rivin lopussa olevien säilyneiden tyhjien tilojen kiertymisen seuraavalle riville käytettäessä white-spaceominaisuutta asetettuna arvoon break-spaces.

Arvokäyttäytyminen eri kielillä

Kuten voit kuvitella, eri kielillä on erilaiset mieltymykset, kun on kyse siitä, miten teksti jaetaan uusille riveille. Kaikilla kielillä ei ole standardoitua käytäntöä. Tämä jättää selainten tehtäväksi selvittää ja noudattaa tietyn kielen "oikeita" sääntöjä. Mutta eritelmässä esitetään useita vaatimuksia sen määrittämiseksi, sallitaanko linjojen rikkominen line-breaktiukkuuden eri tasoilla tietyissä tilanteissa. Esitämme ne täällä.

Tilanne	`normal`	`loose`	`strict`
Tauot ennen japanilaista pientä kanaa tai Katakana-Hiragana pitkittynyt äänimerkki eli hahmo Unicode-rivinvaihtoluokasta `CJ`	❌	✅	✅
Tauko ennen tiettyjä CJK-väliviivamaisia merkkejä: 〜 U + 301C, ゠ U + 30A0	❌	✅ jos kirjoitusjärjestelmä on kiinalainen tai japanilainen	Sallittu, jos kirjoitusjärjestelmä on kiinalainen tai japanilainen
Tauko ennen tiettyjä CJK-väliviivamaisia merkkejä: 〜 U + 301C, ゠ U + 30A0	❌	✅ jos edellinen merkki kuuluu Unicode-rivinvaihtoluokkaan `ID`(myös silloin, kun edellistä merkkiä käsitellään `ID`johtuen`word-break: break-all)`	❌
Katkokset ennen iteraatiomerkkejä: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Katkeaminen erottamattomien merkkien välillä (kuten ‥ U + 2025,… U + 2026), ts. Unicode-rivinvaihtoluokan merkit `IN`	❌	✅	❌
Katkokset ennen tiettyjä keskitettyjä välimerkkejä:・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Tauot ennen suffiksit: Merkit ja Unicode rivinvaihtoineen luokan `PO`ja Itä-Aasian Leveys omaisuutta `Ambiguous`, `Fullwidth`tai `Wide`.	❌	✅	❌
Tauot jälkeen etuliitteet: Merkit ja Unicode rivinvaihtoineen luokan `PR`ja Itä-Aasian Leveys omaisuutta `Ambiguous`, `Fullwidth`tai `Wide`.	❌	✅	❌