Linjeskift - CSS-triks | CSS-almanakk 2025

CSS- line-breakegenskapen definerer hvor strengt det skal håndheves regler for innpakning av tekstinnpakning på nye linjer, spesielt når du arbeider med symboler og tegnsetting i kinesiske, japanske eller koreanske (CJK) skriftsystemer. Den er inkludert i CSS Text Module Level 3-spesifikasjonen, som for øyeblikket er i Editor's Draft.

.element ( line-break: strict; )

Demo

Syntaks

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

Første: auto
Gjelder: alle elementer
Arvet: ja
Beregnet verdi: som spesifisert
Animasjonstype: diskret

Verdier

/* 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: Dette lar nettleseren bestemme hvordan den implementerer linjeskift. Hver nettleser kan variere med hensyn til kriterier basert på faktorer, inkludert linjelengde.
loose: Dette er den letteste håndhevelsen av regelbrudd. Spesifikasjonen siterer korte tekstlinjer, som de vi kan se i en avis, som et eksempel der denne verdien kan brukes.
normal: Dette bryter tekstlinjer basert på det "vanligste" settet med regler. (Merk at det ikke finnes noen definisjon om hva det vanligste settet med regler er eller hva det kan inneholde.)
strict: Dette håndhever det strengeste settet med regler for linjeskift.
anywhere: Denne verdien muliggjør myke innpakningsmuligheter, som gjør at tekst kan brytes i mellomrom eller tegnsetting i stedet for ordgrensen alene. Det er ideelt for språk som kanskje ikke bruker mellomrom eller tegnsetting for å skille ord. Spesifikasjonen sier at CSS ikke definerer muligheter for soft wrap, og denne verdien anerkjenner og utnytter dem til å anvende regler for linjebrudd. Spesifikasjonen beskriver atferden til innpakning av tekst som det vi vanligvis ser i en terminal.

Spesifikasjonen bemerker også at anywhereverdien tillater bevarte hvite mellomrom på slutten av en linje å vikle seg til neste linje når den brukes med white-spaceeiendommen satt til break-spaces.

Verdi atferd på tvers av forskjellige språk

Som du kanskje forestiller deg, har forskjellige språk forskjellige preferanser når det gjelder hvordan tekst brytes inn på nye linjer. Det er ingen standardiserte konvensjoner som brukes av alle språk. Det overlater til nettlesere å finne ut og følge de “riktige” reglene for et bestemt språk. Men spesifikasjonen skisserer flere krav for å bestemme om linjebrudd er tillatt på forskjellige line-breakstrenghetsnivåer i visse situasjoner. Vi presenterer de her.

situasjon	`normal`	`loose`	`strict`
Bryter før japansk liten kana eller Katakana-Hiragana langvarige lydmerke, dvs. karakter fra Unicode linjebruddsklassen `CJ`	❌	✅	✅
Bryter før visse CJK-bindestreklignende tegn: 〜 U + 301C, ゠ U + 30A0	❌	✅ hvis skriftsystemet er kinesisk eller japansk	Tillatt hvis skriftsystemet er kinesisk eller japansk
Bryter før visse CJK-bindestreklignende tegn: 〜 U + 301C, ゠ U + 30A0	❌	✅ hvis forrige tegn tilhører Unicode linjebruddsklassen `ID`(inkludert når forrige tegn behandles som på `ID`grunn av`word-break: break-all)`	❌
Bryter før iterasjonsmerker: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Bryter mellom uatskillelige tegn (for eksempel ‥ U + 2025,… U + 2026) dvs. tegn fra Unicode-linjebruddsklassen `IN`	❌	✅	❌
Bryter før visse sentrerte skilletegn: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Pauser før suffikser: Tegn med Unicode linjen bryte klasse `PO`og østasiatiske Bredde eiendom `Ambiguous`, `Fullwidth`eller `Wide`.	❌	✅	❌
Pauser etter prefikser: Tegn med Unicode linjen bryte klasse `PR`og østasiatiske Bredde eiendom `Ambiguous`, `Fullwidth`eller `Wide`.	❌	✅	❌