Sortörés - CSS-trükkök | CSS Almanach 2025

A CSS line-breaktulajdonság meghatározza, hogy miként kell szigorúan betartani a szövegburkolás új sorokra történő csomagolását, különösen akkor, ha szimbólumokkal és írásjelekkel dolgozunk kínai, japán vagy koreai (CJK) írásrendszerekben. Ez benne van a CSS szövegmodul 3. szintű specifikációjában, amely jelenleg a Szerkesztő Piszkozatában található.

.element ( line-break: strict; )

Demó

Szintaxis

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

A kezdeti: auto
Alkalmazható: minden elem
Örökölt: igen
Számított érték: a megadott
Animáció típusa: diszkrét

Értékek

/* 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: Ez lehetővé teszi a böngésző számára, hogy miként hajtsa végre a sortöréseket. Minden böngésző a tényezők, köztük a vonalhossz alapján eltérő lehet a kritériumok szerint.
loose: Ez a legkönnyebben érvényesíti a sértési szabályokat. A specifikáció rövid szövegsorokat idéz, például azokat, amelyeket egy újságban láthatunk, példaként, ahol ezt az értéket fel lehet használni.
normal: Ez megszakítja a szövegsorokat a „leggyakoribb” szabályrendszer alapján. (Vegye figyelembe, hogy nincs meghatározva, hogy mi a legelterjedtebb szabályrendszer, vagy mit tartalmazhat.)
strict: Ez érvényesíti a legszigorúbb szabályokat a sortörésekre.
anywhere: Ez az érték lehetővé teszi a soft wrap lehetőségeket, amelyek lehetővé teszik, hogy a szöveg csak a szóhatár helyett szóközökre vagy írásjelekre szakadjon. Ideális olyan nyelvek számára, amelyek esetleg nem használnak szóközt vagy írásjeleket a szavak elválasztásához. A specifikáció szerint a CSS nem definiálja a soft wrap lehetőségeket, és ez az érték felismeri és felhasználja őket sortörési szabályok alkalmazásában. A specifikáció leírja a szövegburkolási viselkedést, mint amit általában egy terminálnál látunk.

A specifikáció azt is megjegyzi, hogy az anywhereérték lehetővé teszi, hogy a sor végén lévő megőrzött szóközök átgördüljenek a következő sorba, ha a white-spacetulajdonságot beállítva break-spaces.

Értékeljen viselkedést a különböző nyelveken

Ahogy elképzelheted, a különböző nyelveknek más a preferenciájuk, amikor a szöveget új sorokra bontják. Nincs szabványosított konvenció, amelyet minden nyelv használna. Ez a böngészőkre bízza, hogy kitalálják és betartsák az adott nyelv „helyes” szabályait. De a specifikáció számos követelményt vázol fel annak meghatározására, hogy a line-breakszituáció megengedett-e bizonyos szigorúság különböző szintjein . Itt bemutatjuk azokat.

Helyzet	`normal`	`loose`	`strict`
Szünetek a japán kis kana vagy a Katakana-Hiragana elhúzódó hangjel, azaz az Unicode vonaltörési osztály karaktere előtt `CJ`	❌	✅	✅
Szünetek bizonyos CJK kötőjelszerű karakterek előtt: 〜 U + 301C, ゠ U + 30A0	❌	✅ ha az írási rendszer kínai vagy japán	Engedélyezett, ha az írási rendszer kínai vagy japán
Szünetek bizonyos CJK kötőjelszerű karakterek előtt: 〜 U + 301C, ゠ U + 30A0	❌	✅ ha az előző karakter az Unicode sorszakító osztályba tartozik `ID`(ideértve azt is, ha az előző karaktert a következőképpen kezeljük `ID`:`word-break: break-all)`	❌
Törések az iterációs jelek előtt: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Szétválaszthatatlan karakterek (például ‥ U + 2025,… U + 2026), azaz az Unicode sorszakító osztály karakterei között `IN`	❌	✅	❌
Szünetek bizonyos központosított írásjelek előtt: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Szünetek előtt utótagok: karakterek Unicode vonal törés osztály `PO`és a kelet-ázsiai width tulajdonság `Ambiguous`, `Fullwidth`vagy `Wide`.	❌	✅	❌
Szünetek után előtagokat: karakterek Unicode vonal törés osztály `PR`és a kelet-ázsiai width tulajdonság `Ambiguous`, `Fullwidth`vagy `Wide`.	❌	✅	❌