Radbrytning - CSS-tricks | CSS Almanack 2025

CSS- line-breakegenskapen definierar hur strikt man ska tillämpa regler för inslagning av textomslag på nya rader, särskilt när man arbetar med symboler och skiljetecken i kinesiska, japanska eller koreanska (CJK) skrivsystem. Det ingår i CSS Text Module Level 3-specifikationen, som för närvarande finns i Editor's Draft.

.element ( line-break: strict; )

Demo

Syntax

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

Första: auto
Gäller för: alla element
Ärvt: ja
Beräknat värde: som specificerat
Animationstyp: diskret

Värden

/* 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: Detta låter webbläsaren bestämma hur den implementerar radbrytningar. Varje webbläsare kan skilja sig beroende på kriterier baserat på faktorer, inklusive radlängd.
loose: Detta är den lättaste tillämpningen av regler som bryter mot linje. Specifikationen citerar korta textrader, som de vi kan se i en tidning, som ett exempel där detta värde kan användas.
normal: Detta bryter textrader baserat på den "vanligaste" uppsättningen regler. (Observera att det inte finns någon definition om vad den vanligaste uppsättningen regler är eller vad den kan innehålla.)
strict: Detta verkställer de strängaste reglerna för radbrytningar.
anywhere: Detta värde möjliggör mjuka omslagsmöjligheter, som gör att texten kan brytas i mellanslag eller skiljetecken istället för enbart ordgränsen. Det är perfekt för språk som kanske inte använder mellanslag eller skiljetecken för att separera ord. Specifikationen säger att CSS inte definierar soft wrap-möjligheter, och detta värde känner igen och utnyttjar dem för att tillämpa regler för radbrytning. Specifikationen beskriver beteendet för inslagning av text som det vi normalt ser i en terminal.

Specifikationen noterar också att anywherevärdet tillåter bevarade vita blanksteg i slutet av en rad att slå in till nästa rad när den används med white-spaceegenskapen inställd på break-spaces.

Värde beteende på olika språk

Som du kan föreställa dig har olika språk olika preferenser när det gäller hur text delas upp på nya rader. Det finns ingen standardiserad konvention som används av alla språk. Det lämnar upp till webbläsare att ta reda på och följa de ”rätta” reglerna för ett visst språk. Men specifikationen beskriver flera krav för att avgöra om linjebrottning är tillåten på olika nivåer av line-breakstrikthet i vissa situationer. Vi presenterar dem här.

Situation	`normal`	`loose`	`strict`
Bryter före japansk liten kana eller Katakana-Hiragana förlängda ljudmärke, dvs. karaktär från Unicode-linjens brytande klass `CJ`	❌	✅	✅
Bryter före vissa CJK bindestreckliknande tecken: 〜 U + 301C, ゠ U + 30A0	❌	✅ om skrivsystemet är kinesiskt eller japanskt	Tillåtet om skrivsystemet är kinesiskt eller japanskt
Bryter före vissa CJK bindestreckliknande tecken: 〜 U + 301C, ゠ U + 30A0	❌	✅ om det föregående tecknet tillhör Unicode-radbrytningsklassen `ID`(inklusive när föregående tecken behandlas som på `ID`grund av`word-break: break-all)`	❌
Bryter före iterationsmärken: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Bryter mellan oskiljaktiga tecken (t.ex. ‥ U + 2025, ... U + 2026) dvs. tecken från Unicode-radbrytarklassen `IN`	❌	✅	❌
Bryter före vissa centrerade skiljetecken: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Pauser före suffix: Tecken med Unicode linjebryt klass `PO`och fastigheten östasiatiska Bredd `Ambiguous`, `Fullwidth`eller `Wide`.	❌	✅	❌
Pauser efter prefix: Tecken med Unicode linjebryt klass `PR`och fastigheten östasiatiska Bredd `Ambiguous`, `Fullwidth`eller `Wide`.	❌	✅	❌