Interruzione di riga - Trucchi CSS

La line-breakproprietà CSS definisce quanto rigorosamente applicare le regole per il wrapping del testo che va a capo su nuove righe, in particolare quando si lavora con simboli e punteggiatura nei sistemi di scrittura cinese, giapponese o coreano (CJK). È incluso nella specifica CSS Text Module Level 3, attualmente in Editor's Draft.

.element ( line-break: strict; )

Demo

Sintassi

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

Iniziale: auto
Si applica a: tutti gli elementi
Ereditato: sì
Valore calcolato: come specificato
Tipo di animazione: discreta

Valori

/* 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: Consente al browser di decidere come implementare le interruzioni di riga. Ciascun browser può differire in base ai criteri in base a fattori, inclusa la lunghezza della riga.
loose: Questa è l'applicazione più leggera delle regole di interruzione di riga. La specifica cita brevi righe di testo, come quelle che potremmo vedere su un giornale, come esempio in cui questo valore potrebbe essere utilizzato.
normal: Interrompe le righe di testo in base al set di regole "più comune". (Si noti che non viene fornita alcuna definizione su quale sia il set di regole più comune o cosa potrebbe contenere.)
strict: Questo applica la serie più rigida di regole per le interruzioni di riga.
anywhere: Questo valore abilita le opportunità di ritorno a capo morbido, che consentono al testo di interrompersi negli spazi o nella punteggiatura invece del solo confine della parola. È ideale per le lingue che potrebbero non utilizzare spazi o punteggiatura per separare le parole. La specifica dice che CSS non definisce opportunità di avvolgimento morbido e questo valore le riconosce e le sfrutta per applicare regole di interruzione di riga. Le specifiche descrivono il comportamento di avvolgimento del testo come quello che normalmente vediamo in un terminale.

La specifica rileva inoltre che il anywherevalore consente agli spazi bianchi conservati alla fine di una riga di andare a capo alla riga successiva quando viene utilizzato con la white-spaceproprietà impostata su break-spaces.

Valorizza il comportamento in diverse lingue

Come puoi immaginare, lingue diverse hanno preferenze diverse quando si tratta di come il testo viene suddiviso in nuove righe. Non esiste una convenzione standardizzata utilizzata da tutte le lingue. Ciò lascia ai browser il compito di capire e seguire le regole "corrette" per una particolare lingua. Ma la specifica delinea diversi requisiti per determinare se l'interruzione di riga è consentita ai diversi livelli di line-breakrigore in determinate situazioni. Li presenteremo qui.

Situazione	`normal`	`loose`	`strict`
Si interrompe prima del kana giapponese piccolo o del marchio sonoro prolungato Katakana-Hiragana, ovvero carattere della classe di interruzione di riga Unicode `CJ`	❌	✅	✅
Interruzioni prima di alcuni caratteri simili a trattini CJK: 〜 U + 301C, ゠ U + 30A0	❌	✅ se il sistema di scrittura è cinese o giapponese	Consentito, se il sistema di scrittura è cinese o giapponese
Interruzioni prima di alcuni caratteri simili a trattini CJK: 〜 U + 301C, ゠ U + 30A0	❌	✅ se il carattere precedente appartiene alla classe di interruzione di riga Unicode `ID`(incluso quando il carattere precedente viene considerato come `ID`dovuto a`word-break: break-all)`	❌
Interruzioni prima dei segni di iterazione: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Interruzioni tra caratteri inseparabili (come ‥ U + 2025,… U + 2026) cioè caratteri della classe di interruzione di riga Unicode `IN`	❌	✅	❌
Interruzioni prima di alcuni segni di punteggiatura centrati: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Breaks prima suffissi: I personaggi con la linea di rottura di classe Unicode `PO`e la proprietà Width orientale `Ambiguous`, `Fullwidth`o `Wide`.	❌	✅	❌
Breaks dopo prefissi: I personaggi con la linea di rottura di classe Unicode `PR`e la proprietà Width orientale `Ambiguous`, `Fullwidth`o `Wide`.	❌	✅	❌