Putus talian - Trik CSS | CSS Almanac 2025

Properti CSS line-breakmendefinisikan seberapa ketat untuk menegakkan peraturan untuk membungkus pembungkus teks pada baris baru, terutama ketika bekerja dengan simbol dan tanda baca dalam sistem tulisan Cina, Jepun atau Korea (CJK). Ini termasuk dalam spesifikasi Modul Teks CSS Level 3, yang saat ini ada dalam Draf Editor.

.element ( line-break: strict; )

Demo

Sintaks

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

Permulaan: auto
Berlaku untuk: semua elemen
Diwarisi: ya
Nilai dikira: seperti yang dinyatakan
Jenis animasi: diskret

Nilai

/* 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: Ini membolehkan penyemak imbas memutuskan bagaimana ia melaksanakan pemecahan baris. Setiap penyemak imbas mungkin berbeza berdasarkan kriteria berdasarkan faktor, termasuk panjang garis.
loose: Ini adalah penguatkuasaan peraturan melanggar garis yang paling ringan. Spesifikasi menyebut baris teks pendek, seperti yang mungkin kita lihat di surat khabar, sebagai contoh di mana nilai ini mungkin digunakan.
normal: Ini memecahkan baris teks berdasarkan sekumpulan peraturan "paling umum". (Perhatikan bahawa tidak ada definisi yang diberikan tentang set peraturan yang paling umum atau apa yang mungkin terkandung di dalamnya.)
strict: Ini menguatkan sekumpulan peraturan yang paling ketat untuk pemutusan talian.
anywhere: Nilai ini membolehkan peluang pembungkus lembut, yang membolehkan teks pecah pada ruang atau tanda baca dan bukannya sempadan perkataan sahaja. Sangat sesuai untuk bahasa yang mungkin tidak menggunakan spasi atau tanda baca untuk memisahkan kata. Spesifikasi mengatakan bahawa CSS tidak menentukan peluang pembungkus lembut, dan nilai ini mengiktiraf dan memanfaatkannya untuk menerapkan peraturan melanggar garis. Spesifikasi menerangkan tingkah laku pembungkus teks seperti yang biasa kita lihat di terminal.

Spesifikasi tersebut juga menyatakan bahawa anywherenilainya memungkinkan ruang putih yang diawetkan pada akhir garis untuk membungkus ke baris berikutnya apabila digunakan dengan white-spacesifat yang ditetapkan ke break-spaces.

Nilai tingkah laku dalam pelbagai bahasa

Seperti yang anda bayangkan, bahasa yang berlainan mempunyai keutamaan yang berbeza dalam hal bagaimana teks dipecah menjadi baris baru. Tidak ada konvensyen standard yang digunakan oleh semua bahasa. Itu bergantung kepada penyemak imbas untuk mengetahui dan mengikuti peraturan "betul" untuk bahasa tertentu. Tetapi spesifikasi tersebut menggariskan beberapa syarat untuk menentukan sama ada pemecahan garis dibenarkan pada tahap line-breakketegasan yang berbeza dalam situasi tertentu. Kami akan membentangkannya di sini.

Keadaan	`normal`	`loose`	`strict`
Pecah sebelum kana kecil Jepun atau tanda bunyi Katakana-Hiragana berpanjangan, iaitu watak dari kelas pemecah garis Unicode `CJ`	❌	✅	✅
Pecah sebelum watak seperti tanda hubung CJK tertentu: 〜 U + 301C, ゠ U + 30A0	❌	✅ sekiranya sistem tulisannya berbahasa Cina atau Jepun	Dibolehkan, jika sistem tulisannya berbahasa Cina atau Jepun
Pecah sebelum watak seperti tanda hubung CJK tertentu: 〜 U + 301C, ゠ U + 30A0	❌	✅ jika watak sebelumnya tergolong dalam kelas pemecah garis Unicode `ID`(termasuk ketika watak sebelumnya dianggap sebagai `ID`kerana`word-break: break-all)`	❌
Pecah sebelum tanda lelaran: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Perbezaan antara watak yang tidak dapat dipisahkan (seperti ‥ U + 2025,… U + 2026) iaitu watak dari kelas pemecah baris Unicode `IN`	❌	✅	❌
Pecah sebelum tanda baca berpusat tertentu: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Rehat sebelum akhiran: Watak dengan Unicode kelas talian berbuka `PO`dan harta Asia Timur Lebar `Ambiguous`, `Fullwidth`, atau `Wide`.	❌	✅	❌
Rehat selepas awalan: Watak dengan Unicode kelas talian berbuka `PR`dan harta Asia Timur Lebar `Ambiguous`, `Fullwidth`, atau `Wide`.	❌	✅	❌