Bagaimana Mengubah Wrapping Teks Lalai dengan HTML dan CSS

Tidak seperti kertas, laman web boleh hampir tak terhingga memanjang ke sisi. Seperti yang mengagumkan, itu bukan sesuatu yang kita perlukan ketika membaca. Pelayar membungkus teks bergantung kepada lebar bekas teks dan juga lebar skrin supaya kita dapat melihat semua teks tanpa perlu menatal ke sisi jauh (hanya ke bawah).

Pembalut adalah pelayar yang mempertimbangkan banyak faktor, seperti bahasa teks atau penempatan tanda baca dan ruang-mereka jangan hanya menolak ke bawah apa yang tidak sesuai di dalam kotak yang ditakrifkan untuk kandungan teks.

Selain membungkus, pelayar juga menjaga ruang; mereka menggabungkan beberapa ruang berturut-turut dalam kod sumber ke dalam satu ruang tunggal pada halaman yang diberikan, dan mereka juga mendaftar memecahkan garis terpaksa sebelum mula bekerja pada pembungkus.

Bila hendak menukar pembungkusan teks lalai

Itu semua hebat, dan sangat dihargai. Tetapi, kita dapat dengan mudah berakhir dalam keadaan di mana tingkah laku pelayar lalai bukanlah yang kita cari. Ia boleh menjadi tajuk itu tidak boleh dibungkus atau perkataan dalam perenggan itu lebih baik dipecahkan daripada turun satu baris, meninggalkan ruang kosong yang aneh di hujung baris.

Ia juga mungkin berlaku bahawa kita hanya mati-matian memerlukan ruang yang dipelihara dalam teks kami, Walau bagaimanapun penyemak imbas terus menggabungkannya menjadi satu, memaksa kita untuk menambah berbilang dalam kod sumber.

Pilihan pembungkus mungkin juga menukar dengan bahasa dan tujuan teks. Artikel berita Mandarin dan puisi Perancis tidak semestinya perlu dibungkus dengan cara yang sama.

Terdapat beberapa sifat CSS yang adil (dan elemen HTML!) Yang boleh mengawal pembalut dan titik putus dan juga tentukan bagaimana ruang dan garisan baris diproses sebelum membungkus.

Peluang pembungkus lembut & rehat bungkus lembut

Pelayar membuat keputusan untuk membungkus teks limpahan bergantung pada sempadan perkataan, tanda hubung, suku kata, tanda baca, ruang dan banyak lagi. Tempat-tempat ini semua dipanggil peluang bungkus lembut dan apabila penyemak imbas memecahkan teks di satu tempat tersebut, rehat dipanggil rehat balut lembut.

Cara paling mudah untuk memaksa rehat tambahan boleh dilakukan dengan menggunakan lama yang baik
elemen.

Whitespace

Jika anda sudah biasa dengan ruang putih Sifat CSS Saya yakin anda mula-mula mengetahui dengan cara yang sama seperti yang lain; semasa mencari jalan mengelakkan pembungkusan teks. The sekarang nilai ruang putih betul betul.

Walau bagaimanapun ruang putih harta adalah lebih daripada sekadar pembalut. Pertama sekali, apakah ruang kosong? Ianya adalah set aksara ruang. Setiap ruang dalam set berbeza antara satu sama lain panjang, arah, atau kedua-duanya.

Suatu tipikal watak ruang mendatar tunggal adalah apa yang kita tambah dengan menekan kekunci ruang. Kekunci tab juga menambah a ruang yang sama tetapi dengan panjang yang lebih besar. Masukkan kunci menambah a ruang menegak untuk memulakan barisan baru, dan dalam HTML menambah a ruang yang tidak boleh dipisahkan ke laman web. Seperti ini, terdapat banyak jenis ruang yang membentuk “ruang kosong”.

Seperti yang saya nyatakan di awal, pelayar runtuh pelbagai ruang (kedua-dua mendatar dan menegak) dalam sumber menjadi satu ruang. Mereka juga pertimbangkan watak-watak ruang untuk membungkus peluang (tempat di mana teks boleh dibungkus) apabila dibungkus diperlukan.

Dan, tepatnya tindakan penyemak imbas ini yang dapat kita kendalikan ruang putih. Perhatikan bahawa ruang putih harta tidak menjejaskan semua jenis ruang, hanya yang paling kerap seperti ruang tunggal mendatar biasa, ruang tab, dan suapan talian.

Di bawah, anda boleh melihat tangkapan skrin teks contohnya dibalut oleh penyemak imbas agar sesuai di dalam bekasnya. Limpahan berlaku di bahagian bawah bekas dan teks melimpah berwarna dengan cara yang berbeza. Anda akan melihatnya runtuhan ruang berturut-turut dalam kod.

 
 â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. 

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

Selepas memohon ruang putih: sekarang; peraturan, bungkusan teks berubah mengikut cara berikut:

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

The pra nilai ruang putih mengekalkan semua ruang putih dan menghalang pembungkusan teks:

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

The pra-bungkus nilai ruang putih mengekalkan semua ruang putih dan membungkus teks:

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

Akhirnya, pra-baris nilai ruang putih mengekalkan ruang kosong menegak seperti barisan baru dan membungkus teks:

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

Pecahan perkataan

Satu lagi ciri penting CSS yang perlu anda ketahui untuk mengawal bungkusan teks adalah kata-break. Anda dapat melihat dalam semua tangkapan skrin di atas bahawa penyemak imbas membungkus teks sebelum perkataan “hello” di sebelah kanan, di luar yang teks melimpah. Penyemak imbas tidak melanggar perkataan itu.

Walau bagaimanapun, jika anda perlu membenarkan pemecahan huruf dalam satu perkataan supaya teks itu akan kelihatan walaupun di sebelah kanan anda perlu menggunakannya pecah-semua nilai untuk kata-break harta:

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

The kata-break harta mempunyai nilai ketiga selain pecah-semua dan normal (kepunyaan pemecahan garisan lalai). The simpan semua nilai tidak membenarkan pecah kata-kata.

Anda mungkin tidak dapat melihat kesannya simpan semua dalam Bahasa Inggeris. Tetapi, dalam bahasa mana huruf dalam satu perkataan adalah unit bermakna sendiri, pelayar mungkin memecahkan kata-kata apabila membungkus, dan ini boleh dihalang menggunakan simpan semua.

Sebagai contoh, huruf dalam perkataan Korea, pada mulanya pecah untuk pembalut, disimpan bersama apabila ruang putih: tetap-semua; peraturan ditentukan.

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

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

Harta ini mungkin menyokong nilai lain yang dipanggil perkataan pecah-belah pada masa hadapan. Anda akan melihat bagaimana perkataan pecah-belah kerja kemudian, di “Bungkus limpahan” bahagian artikel ini.

Peluang pecah perkataan

Pemaju juga boleh tambah peluang balut di dalam perkataan, menggunakan Elemen HTML. Jika penyemak imbas perlu membungkus rentetan teks, ia akan mempertimbangkan tempat di mana hadir untuk peluang pembungkus.

 
 â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. â ??  ?? Hello. 
 

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

Tanpa , keseluruhan “Hello” perkataan akan diberikan dalam barisan baru. Dengan menambah untuk kod HTML, kami memaklumkan pelayar itu tidak mengapa untuk memecahkan perkataan pada ketika itu untuk pembalut, sekiranya perlu.

Hyphens

The tanda hubung Hartanah CSS adalah cara lain untuk mengawal rehat antara huruf dalam satu perkataan. Kami mempunyai artikel berasingan mengenai hyphenation CSS jika anda berminat. Singkatnya, harta itu membolehkan anda membuat peluang membungkus melalui tanda tatal.

Ia auto nilai mendorong pelayar ke secara automatik menyekat dan memecahkan kata-kata di mana diperlukan semasa membungkus. The manual nilai kuasa pelayar ke bungkus (jika perlu) pada peluang hipnotasi yang ditambahkan oleh kami, seperti aksara tanda hubung (‐) atau ­ (hipetan lembut). Jika tiada telah diberikan sebagai nilai akan ada tiada pembalut dilakukan berhampiran tanda hubung.

 
 bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse bluehouse 
 

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

Bungkus limpahan

The melimpah Kawalan harta CSS jika a pelayar boleh memecahkan kata-kata (atau ruang yang dipelihara, sokongan yang mungkin berlaku dalam masa terdekat) pada limpahan. Apabila perkataan pecah-belah nilai diberikan untuk melimpah, perkataan itu akan dipecahkan dalam kes tidak ada peluang pembungkusan lembut lain yang dijumpai dalam talian.

Perhatikan bahawa melimpah juga dikenali sebagai kata-bungkus (mereka adalah alias).

 
 bluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehousebluehouse 
 

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

Tanpa ruang di antara huruf dalam kod HTML di atas (iaitu tidak ada peluang pembungkus), teks tidak dibungkus pada mulanya dan dipelihara sebagai satu perkataan.

Walau bagaimanapun, apabila kebenaran diberikan untuk membungkus teks dengan memecahkan kata-kata (iaitu perkataan pecah-belah nilai diberikan kepada melimpah), pembungkus berlaku dengan memecahkan seluruh tali di mana sahaja ia diperlukan.