Cara Mengubah Pembungkus Teks Default dengan HTML dan CSS

Tidak seperti kertas, halaman web bisa hampir tak terhingga memanjang ke samping. Sebanyak yang mengesankan, itu bukan sesuatu yang benar-benar kita butuhkan saat membaca. Peramban membungkus teks tergantung pada lebar wadah teks dan lebar layar sehingga kita dapat melihat semua teks tanpa harus menggulir ke samping (hanya ke bawah).

Pembungkus adalah sesuatu yang dilakukan browser dengan mempertimbangkan banyak faktor, seperti bahasa teks atau penempatan tanda baca dan spasi-mereka jangan hanya didorong ke bawah apa yang tidak cocok dalam kotak yang ditentukan untuk konten teks.

Selain membungkus, browser juga mengurus ruang; mereka menggabungkan beberapa ruang berturut-turut dalam kode sumber menjadi satu ruang tunggal pada halaman yang diberikan, dan mereka juga mendaftarkan jeda baris paksa sebelum mulai mengerjakan pembungkusan.

Kapan mengubah pembungkus teks standar

Itu semua luar biasa, dan sangat dihargai. Namun, kita dapat dengan mudah berakhir dalam keadaan di mana perilaku browser default bukan yang kita cari. Ini bisa menjadi tajuk utama tidak boleh dibungkus atau sebuah kata dalam paragraf itu lebih baik dipatahkan daripada turun garis, meninggalkan ruang kosong yang tampak aneh di akhir baris.

Bisa juga terjadi bahwa kita hanya mati-matian membutuhkan ruang-ruang tersebut dalam teks kita, namun browser terus menggabungkannya menjadi satu, memaksa kami untuk menambahkan beberapa dalam kode sumber.

Preferensi pembungkus mungkin juga ubah dengan bahasa dan tujuan teks. Sebuah artikel berita Mandarin dan puisi Prancis tidak perlu dibungkus dengan cara yang persis sama.

Ada cukup banyak properti CSS (dan elemen HTML!) Yang bisa mengontrol pembungkus dan breakpoints dan juga menentukan bagaimana spasi dan jeda baris diproses sebelum dibungkus.

Peluang soft wrap & istirahat soft wrap

Browser memutuskan di mana untuk membungkus teks yang meluap tergantung pada batas kata, tanda hubung, suku kata, tanda baca, spasi dan banyak lagi. Tempat-tempat ini semuanya disebut peluang bungkus lunak dan ketika browser tidak memecah teks di satu tempat seperti itu, istirahat disebut a istirahat bungkus lembut.

Cara paling sederhana untuk memaksakan istirahat ekstra bisa dilakukan dengan menggunakan yang lama
elemen.

Ruang putih

Jika Anda terbiasa dengan ruang putih Properti CSS Saya yakin Anda pertama kali mengetahuinya dengan cara yang sama seperti banyak orang lain; saat mencari cara untuk mencegah pembungkus teks. Itu sekarangrap Nilai dari ruang putih melakukan hal itu.

Namun demikian ruang putih properti adalah lebih dari sekedar pembungkus. Pertama-tama, apakah spasi putih itu? Itu adalah set karakter ruang. Setiap ruang di set berbeda satu sama lain panjang, arah, atau keduanya.

Sebuah tipikal karakter ruang horisontal tunggal adalah apa yang kita tambahkan dengan menekan tombol bilah spasi. Tombol Tab juga menambahkan ruang serupa tetapi dengan panjang lebih besar. Tombol enter menambahkan a ruang vertikal untuk memulai baris baru, dan dalam HTML menambahkan a ruang tak terpecahkan tunggal ke halaman web. Seperti ini, ada banyak jenis ruang yang membentuk “ruang putih”.

Seperti yang saya sebutkan di awal, browser runtuh beberapa ruang (baik horisontal dan vertikal) di sumber menjadi satu ruang. Mereka juga pertimbangkan karakter ruang ini untuk peluang pembungkus (tempat di mana teks dapat dibungkus) saat pembungkus diperlukan.

Dan, tindakan browser inilah yang bisa kita kendalikan ruang putih. Perhatikan bahwa ruang putih properti tidak memengaruhi semua jenis ruang, hanya yang paling sering seperti ruang tunggal horisontal biasa, ruang tab, dan umpan baris.

Di bawah, Anda dapat melihat tangkapan layar dari sampel teks itu dibungkus oleh browser agar muat di dalam wadahnya. Overflow terjadi di bagian bawah wadah dan teks overflown berwarna berbeda. Anda akan melihat runtuhnya ruang berturut-turut dalam kode.

 
 SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo âA A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. 

 .textContainer width: 500px; tinggi: 320px;  

Setelah mendaftar white-space: nowrap; aturan, pembungkus teks berubah dengan cara berikut:

 .textContainer / * ... * / white-space: nowrap;  

Itu pra Nilai dari ruang putih mempertahankan semua ruang putih dan mencegah pembungkus teks:

 .textContainer / * ... * / white-space: pre;  

Itu pra-bungkus Nilai dari ruang putih mempertahankan semua ruang putih dan membungkus teks:

 .textContainer / * ... * / white-space: pre-wrap;  

Akhirnya, pre-line Nilai dari ruang putih mempertahankan spasi putih vertikal seperti baris baru dan membungkus teks:

 .textContainer / * ... * / white-space: pre-line;  

Kata istirahat

Properti CSS penting lainnya yang harus Anda ketahui untuk mengendalikan pembungkus teks adalah istirahat. Anda dapat melihat di semua screenshot di atas bahwa browser membungkus teks sebelum kata “Halo” di sisi kanan, di luar itu teks meluap. Browser tidak melanggar kata.

Namun, jika Anda harus memungkinkan pemecahan huruf dalam satu kata sehingga teks akan terlihat bahkan di sisi kanan Anda perlu menggunakan semua nilai untuk istirahat milik:

 .textContainer / * ... * / word-break: break-all;  

Itu istirahat properti memiliki nilai ketiga selain itu semua dan normal (milik garis melanggar standar). Itu simpan semuanya nilai tidak memungkinkan melanggar kata-kata.

Anda mungkin tidak dapat melihat efek dari simpan semuanya dalam Bahasa Inggris. Tapi, dalam bahasa di mana huruf dalam sebuah kata berada unit yang berarti sendiri, browser mungkin mematahkan kata-kata saat membungkus, dan ini bisa dicegah menggunakan simpan semuanya.

Misalnya, huruf dalam kata-kata Korea, awalnya rusak karena dibungkus, disimpan bersama ketika white-space: keep-all; aturan ditentukan.

SEBUAH¬A A¸SEBUAHªSEBUAH³Â ?? à «Â¥SEBUAH¼ Ã-Â-Â¥Ã- ??  ?? à «Â ??  ?? Ã- ??  ??, ì ??  à «Â ??  ?? ìSEBUAH½Â ?? à «Â ??  ?? ë ¡SEBUAH?? Ã- ??  ?? ì ?? Â-ì ??  ?? ìA A¤. SEBUAH¬Â  ?? 10Ã- ??  ?? SEBUAH¬Â ??  à «Â ??  ?? ìSEBUAH½Â ?? à «Â ??  ?? SEBUAHªSEBUAHµA A¬A A?? Ã- ??  ?? ì ??  ?? êA A?? 1997à «Â ...  ?? 3ìA A?? 10a¬A A¼A A¶Â ?? Ã- ??  ° 12ìA A¼SEBUAHªSEBUAH¹A A¬SEBUAH§SEBUAH?? à «Â ??  ... ìA A¼SEBUAH¬A A?? A A§A A¬A A¸SEBUAH¬SEBUAH¦A A¬Â- ?? ìA A?? SEBUAH¬A A´A A¦SEBUAH½Ã «Â ??  ?? ë  ?? ¤. SEBUAH¬SEBUAH§A AªSEBUAH¸SEBUAH?? à «Â ??  ± ë ¡ ?? Ã- ??  ?? ì ?? Â-ì ??  ?? ìA A¤. SEBUAH¬A A´ Ã- ??  ?? ì ??  ?? ìÂ- ?? ì ??  ?? à «Â ??  ?? SEBUAH¬Â- ... êSEBUAH³SEBUAH?? SEBUAH¬Â  ?? à «Â °  ?? ìA A?? SEBUAH¬Â  ?? à «Â¬SEBUAH¸SEBUAHªÂ °  ?? à «Â ?? ¤SEBUAH¬A A´ Ã- ?? ¨SEBUAHªA A?? A AªSEBUAH¨SEBUAH¬A A¬ à «Â ?? ¤SEBUAH¬Â ??  ?? êSEBUAH³SEBUAH¼ SEBUAHªÂ °  ?? ìA A?? A A¶A A¬A A¼A A¥SEBUAH¼ à «Â ?? ¤à «£ £¹Ã «Â ??  ?? ë  ?? ¤.

 .textContainer / * ... * / word-break: keep-all;  

Properti ini mungkin mendukung nilai lain yang disebut kata perpisahan di masa depan. Anda akan lihat caranya kata perpisahan berfungsi nanti, di “Bungkus melimpah” bagian dari artikel ini.

Peluang kata istirahat

Pengembang juga bisa tambahkan peluang bungkus di dalam kata-kata, menggunakan Elemen HTML. Jika browser perlu membungkus string teks, itu akan mempertimbangkan tempat di mana hadir untuk kesempatan pembungkus.

 
 SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Hello âA A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. SEBUAH¢A A?? Halo. 
 

 .textContainer / * ... * / white-space: pre-wrap;  

Tanpa , keseluruhan “Halo” kata akan diterjemahkan di baris baru. Dengan menambahkan ke kode HTML, kami memberi tahu browser itu tidak masalah untuk memecahkan kata pada titik itu untuk pembungkus, kalau-kalau itu perlu.

Tanda hubung

Itu tanda hubung Properti CSS adalah cara lain untuk mengontrol jeda antar huruf dalam sebuah kata. Kami memiliki artikel terpisah tentang tanda hubung CSS jika Anda tertarik. Singkatnya, properti memungkinkan Anda menciptakan peluang membungkus melalui tanda hubung.

Nya mobil Nilai meminta browser untuk secara otomatis hyphenate dan memecahkan kata-kata di mana diperlukan saat membungkus. Itu manual nilai memaksa browser untuk bungkus (jika perlu) di peluang hyphenation ditambahkan oleh kami, seperti karakter tanda hubung (‐) atau ­ (tanda hubung lunak). Jika tidak ada diberikan sebagai nilai akan ada tidak ada pembungkus yang dilakukan di dekat tanda hubung.

 
 bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse 
 

 .textContainer / * ... * / -webkit-hyphens: auto; -ms-hyphens: auto; tanda hubung: otomatis;  

Bungkus melimpah

Itu overflow-wrap Properti CSS mengontrol jika a browser dapat memecahkan kata-kata (atau ruang yang dilestarikan, dukungan yang mungkin terjadi dalam waktu dekat) saat meluap. Ketika kata perpisahan nilai diberikan untuk overflow-wrap, kata akan rusak dalam hal tidak ada peluang bungkus lunak ditemukan dalam barisan.

Catat itu overflow-wrap juga dikenal sebagai bungkus kata (mereka adalah alias).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

 .textContainer / * ... * / overflow-wrap: break-word;  

Tanpa spasi di antara huruf-huruf dalam kode HTML di atas (mis. Tidak ada peluang pembungkus), teks tidak dibungkus pada awalnya dan dipertahankan sebagai satu kata.

Namun, ketika izin diberikan untuk membungkus teks dengan melanggar kata-kata (mis kata perpisahan nilai diberikan kepada overflow-wrap), itu pembungkus terjadi dengan memecah seluruh tali dimanapun itu diperlukan.