Baris-istirahat - Trik CSS | CSS Almanak 2024

line-breakProperti CSS menentukan seberapa ketat penegakan aturan untuk membungkus teks yang membungkus pada baris baru, terutama saat bekerja dengan simbol dan tanda baca dalam sistem penulisan China, Jepang, atau Korea (CJK). Ini termasuk dalam spesifikasi CSS Text Module Level 3, yang saat ini ada di Editor's Draft.

.element ( line-break: strict; )

Demo

Sintaksis

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

Awal: auto
Berlaku untuk: semua elemen
Diwariskan: ya
Nilai yang dihitung: seperti yang ditentukan
Jenis animasi: diskrit

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 memungkinkan browser memutuskan bagaimana menerapkan jeda baris. Setiap browser mungkin berbeda pada kriterianya berdasarkan beberapa faktor, termasuk panjang baris.
loose: Ini adalah penegakan aturan pelanggaran baris paling ringan. Spesifikasi mengutip baris teks pendek, seperti yang mungkin kita lihat di koran, sebagai contoh di mana nilai ini mungkin digunakan.
normal: Ini memecah baris teks berdasarkan kumpulan aturan "paling umum". (Perhatikan bahwa tidak ada definisi yang diberikan tentang apa yang merupakan kumpulan aturan paling umum atau apa isinya.)
strict: Ini memberlakukan aturan yang paling ketat untuk jeda baris.
anywhere: Nilai ini memungkinkan peluang pembungkus halus, yang memungkinkan teks putus pada spasi atau tanda baca alih-alih batas kata saja. Ini ideal untuk bahasa yang mungkin tidak menggunakan spasi atau tanda baca untuk memisahkan kata. Spesifikasi mengatakan bahwa CSS tidak menentukan peluang soft wrap, dan nilai ini mengenali dan memanfaatkannya untuk menerapkan aturan pemutusan baris. Spesifikasi menjelaskan perilaku pembungkusan teks seperti yang biasanya kita lihat di terminal.

Spesifikasi juga mencatat bahwa anywherenilai memungkinkan ruang putih yang dipertahankan di akhir baris untuk digabungkan ke baris berikutnya saat digunakan dengan white-spaceproperti yang disetel ke break-spaces.

Hargai perilaku di berbagai bahasa

Seperti yang Anda bayangkan, bahasa yang berbeda memiliki preferensi yang berbeda dalam hal bagaimana teks dipecah menjadi baris baru. Tidak ada konvensi standar yang digunakan oleh semua bahasa. Terserah browser untuk mencari tahu dan mengikuti aturan "benar" untuk bahasa tertentu. Tetapi spesifikasi tersebut menguraikan beberapa persyaratan untuk menentukan apakah pemutusan garis diperbolehkan pada tingkat line-breakkeketatan yang berbeda dalam situasi tertentu. Kami akan menyajikannya di sini.

Situasi	`normal`	`loose`	`strict`
Istirahat sebelum kana kecil Jepang atau tanda bunyi berkepanjangan Katakana-Hiragana, yaitu karakter dari kelas pemecah baris Unicode `CJ`	❌	✅	✅
Putus sebelum karakter seperti tanda hubung CJK tertentu: 〜 U + 301C, ゠ U + 30A0	❌	✅ jika sistem penulisannya adalah China atau Jepang	Diizinkan, jika sistem penulisannya Cina atau Jepang
Putus sebelum karakter seperti tanda hubung CJK tertentu: 〜 U + 301C, ゠ U + 30A0	❌	✅ jika karakter sebelumnya termasuk dalam kelas pemecah baris Unicode `ID`(termasuk ketika karakter sebelumnya diperlakukan sebagai `ID`karena`word-break: break-all)`	❌
Istirahat sebelum tanda iterasi: 々 U + 3005, 〻 U + 303B, ゝ U + 309D, ゞ U + 309E, ヽ U + 30FD, ヾ U + 30FE	❌	✅	❌
Pemutusan antara karakter yang tidak dapat dipisahkan (seperti ‥ U + 2025,… U + 2026) yaitu karakter dari kelas pemecah baris Unicode `IN`	❌	✅	❌
Istirahat sebelum tanda baca tengah tertentu: ・ U + 30FB, ： U + FF1A, ； U + FF1B, ･ U + FF65,‼ U + 203C,⁇ U + 2047,⁈ U + 2048,⁉ U + 2049,！ U + FF01,？ U + FF1F	❌	✅	❌
Breaks sebelum akhiran: Karakter dengan Unicode kelas garis melanggar `PO`dan properti Asia Timur Lebar `Ambiguous`, `Fullwidth`atau `Wide`.	❌	✅	❌
Breaks setelah awalan: Karakter dengan Unicode kelas garis melanggar `PR`dan properti Asia Timur Lebar `Ambiguous`, `Fullwidth`atau `Wide`.	❌	✅	❌