Koniec linii - CSS-Tricks | Almanach CSS 2025

Właściwość CSS line-breakokreśla, jak ściśle należy egzekwować reguły zawijania tekstu w nowych wierszach, szczególnie podczas pracy z symbolami i znakami interpunkcyjnymi w chińskim, japońskim lub koreańskim (CJK) systemie pisma. Jest on uwzględniony w specyfikacji CSS Text Module Level 3, która obecnie znajduje się w wersji roboczej redakcji.

.element ( line-break: strict; )

Próbny

Składnia

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

Inicjał: auto
Dotyczy: wszystkich elementów
Odziedziczone: tak
Wartość obliczona: jak określono
Typ animacji: dyskretna

Wartości

/* 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: Pozwala przeglądarce zdecydować, w jaki sposób implementuje znaki końca wiersza. Każda przeglądarka może różnić się kryteriami w zależności od czynników, w tym długości linii.
loose: To najlżejsze egzekwowanie zasad łamania linii. Specyfikacja przytacza krótkie wiersze tekstu, takie jak te, które możemy zobaczyć w gazecie, jako przykład, w którym można użyć tej wartości.
normal: To powoduje podział wierszy tekstu na podstawie „najpopularniejszego” zestawu reguł. (Należy pamiętać, że nie podano definicji tego, jaki jest najpowszechniejszy zestaw reguł ani co może zawierać).
strict: Wymusza to najsurowszy zestaw reguł dotyczących łamania linii.
anywhere: Ta wartość włącza możliwości zawijania miękkiego, które pozwalają na dzielenie tekstu na spacje lub znaki interpunkcyjne zamiast samej granicy słowa. Jest to idealne rozwiązanie dla języków, w których do oddzielania słów mogą nie być używane spacje ani znaki interpunkcyjne. Specyfikacja mówi, że CSS nie definiuje możliwości miękkiego zawijania, a ta wartość rozpoznaje je i wykorzystuje do stosowania zasad łamania linii. Specyfikacja opisuje zachowanie zawijania tekstu, takie jak to, co zwykle widzimy w terminalu.

Specyfikacja zauważa również, że anywherewartość umożliwia zachowane białe spacje na końcu linii na zawijanie do następnej linii, gdy jest używana z white-spacewłaściwością ustawioną na break-spaces.

Zachowanie wartości w różnych językach

Jak możesz sobie wyobrazić, różne języki mają różne preferencje, jeśli chodzi o podział tekstu na nowe wiersze. Nie ma ustandaryzowanej konwencji używanej we wszystkich językach. To pozostawia przeglądarkom ustalenie i przestrzeganie „prawidłowych” reguł dla określonego języka. Ale specyfikacja określa kilka wymagań dotyczących określenia, czy łamanie linii jest dozwolone na różnych poziomach line-breakścisłości w określonych sytuacjach. Przedstawimy je tutaj.

Sytuacja	`normal`	`loose`	`strict`
Przerwy przed japońską małą kana lub przedłużonym znakiem dźwiękowym Katakana-Hiragana, tj. Znak z klasy łamania linii Unicode `CJ`	❌	✅	✅
Przerwy przed określonymi znakami podobnymi do łącznika CJK: 〜 U + 301C, ゠ U + 30A0	❌	✅ jeśli system pisma to chiński lub japoński	Dozwolone, jeśli system pisma to chiński lub japoński
Przerwy przed określonymi znakami podobnymi do łącznika CJK: 〜 U + 301C, ゠ U + 30A0	❌	✅ gdy znak poprzedzający należy do klasy linii zerwania Unicode `ID`(w tym, gdy poprzedzająca jest traktowana jako postać `ID`z powodu`word-break: break-all)`	❌
Przerwy przed znakami iteracji: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Przerwy między nierozłącznymi znakami (takimi jak ‥ U + 2025,… U + 2026), tj. Znaki z klasy łamania linii Unicode `IN`	❌	✅	❌
Przerwy przed określonymi wyśrodkowanymi znakami interpunkcyjnymi: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Przerwy przed przyrostków: Postacie z klasy linia łamania Unicode `PO`i właściwości width Azji Wschodniej `Ambiguous`, `Fullwidth`lub `Wide`.	❌	✅	❌
Przerwy po prefiksów: Postacie z klasy linia łamania Unicode `PR`i właściwości width Azji Wschodniej `Ambiguous`, `Fullwidth`lub `Wide`.	❌	✅	❌