Saat meletakkan, webmaster secara berkala memiliki pertanyaan: bagaimana teks akan dibungkus? Dalam kebanyakan kasus, browser menangani tugas ini sendiri. Namun terkadang proses ini harus dikendalikan, terutama ketika membentuk kata-kata dan frasa panjang yang, jika ditransfer secara tidak benar, kehilangan maknanya.
properti bungkus kata
Dalam HTML, ada tag khusus untuk memisahkan garis.
. Tetapi penggunaannya yang terlalu sering dianggap sebagai bentuk yang buruk di kalangan pengembang dan sering kali menunjukkan ketidakprofesionalan. Sebagai bukti, bayangkan Anda memiliki logo dan ingin setiap huruf dimulai pada baris baru:
Hasilnya adalah kode yang rumit dan jelek, dari mana setiap pengembang akan mengalami kejutan budaya. Dan bagaimana jika Anda ingin logo ditampilkan secara horizontal di versi desktop, tetapi secara vertikal jika lebar layar kurang dari 550px? Oleh karena itu, selalu gunakan lembar gaya berjenjang untuk menyesuaikan tampilan elemen. Selain itu, dengan bantuan alat CSS, jeda baris dilakukan dengan cara yang lebih elegan. Pada saat yang sama, tidak ada markup yang berlebihan, yang hanya mengurangi kecepatan memuat halaman.
Properti pertama yang harus dilihat untuk pemrosesan teks adalah word-wrap. Dibutuhkan tiga nilai: normal, break-all dan keep-all. Anda hanya perlu mengingat break-all untuk bekerja. Normal adalah default dan tidak ada gunanya menentukannya. Keep-all berarti untuk mencegah jeda baris dalam dokumen CSS. Dirancang khusus untuk karakter Cina, Jepang dan Korea. Jadi, jika Anda tidak akan membuat blog dalam salah satu bahasa tersebut, Anda tidak memerlukan fitur tersebut. Itu juga tidak didukung oleh browser Safari dan ponsel iOS.
Untuk menetapkan baris baru untuk setiap huruf pada logo dari contoh sebelumnya menggunakan CSS, Anda perlu menulis kode berikut:
P(font: bold 30px Helvetica, sans-serif; lebar: 25px; word-wrap: break-all; )
Lebar dan ukuran font dipilih sedemikian rupa sehingga hanya ada ruang yang cukup untuk satu huruf. Word-wrap dengan nilai break-all memberitahu browser untuk membungkus kata pada baris baru setiap kali. Properti ini tidak bisa disebut tak tergantikan. Tapi itu akan berguna saat mendesain blok kecil dengan teks, seperti kolom komentar.
properti ruang putih
Kesalahan umum yang dilakukan pengembang web pemula adalah mencoba mengedit teks dengan spasi atau menekan tombol Enter dan kemudian bertanya-tanya mengapa upaya mereka tidak muncul di halaman. Tidak peduli berapa kali Anda menekan "Enter", browser akan mengabaikannya. Tetapi ada cara untuk membuatnya menampilkan teks seperti yang Anda inginkan, dan memperhitungkan semua spasi.
Dalam dokumen CSS, jeda baris, yang ditetapkan dengan properti spasi-putih, dapat dikonfigurasi untuk menghormati spasi atau menekan tombol Enter. Spasi putih dengan nilai pre-line akan menyebabkan browser melihat Enter dalam teks.
Jika Anda mengubah pra-baris menjadi pra-bungkus dalam kode CSS Anda, pembungkus baris akan menyertakan spasi. Sebaliknya, nonaktifkan pembungkus apa pun dengan menyetel properti spasi putih ke teks dengan nilai nowrap:
#wrapper p( color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: nowrap; )
teks-overflow
Alat lain yang berguna untuk bekerja dengan teks adalah text-overflow. Selain pembungkus baris, properti CSS memungkinkan konten terpotong saat wadah penuh. Mengambil dua nilai:
- klip - cukup klip teks;
- elipsis - menambahkan elipsis.
Agar properti berfungsi, elemen juga harus diatur untuk mencegah jeda baris dan meluap dengan nilai tersembunyi.
informasi singkat
versi CSS
| css 1 | CSS 2 | CSS 2.1 | CSS3 |
|---|---|---|---|
Keterangan
Properti white-space mengatur cara menampilkan spasi di antara kata-kata. Dalam keadaan normal, sejumlah spasi dalam kode HTML akan ditampilkan sebagai satu di halaman web. Pengecualiannya adalah tag
Teks yang ditempatkan di wadah ini ditampilkan dengan semua spasi seperti yang diformat oleh pengguna. Jadi spasi putih meniru cara kerja tagTapi tidak seperti itu, itu tidak mengubah font menjadi monospace.Sintaksis
spasi putih: normal | sekarang | pra | pra-baris | pra-bungkus | mewarisi
Nilai
normal Teks di jendela browser ditampilkan seperti biasa, jeda baris diatur secara otomatis. nowrap Spasi diabaikan, jeda baris dalam kode HTML diabaikan, semua teks ditampilkan dalam satu baris; namun, menambahkan tag
membungkus teks pada baris baru. pra Teks ditampilkan termasuk semua spasi dan tanda hubung seperti yang ditambahkan oleh pengembang dalam kode HTML. Jika garis terlalu panjang untuk muat di jendela browser, bilah gulir horizontal akan ditambahkan. Spasi pra-baris tidak diperhitungkan dalam teks, teks secara otomatis dibungkus ke baris berikutnya jika tidak sesuai dengan area yang ditentukan. pre-wrap Semua spasi dan tanda hubung dipertahankan dalam teks, tetapi jika lebar garis tidak sesuai dengan area yang ditentukan, maka teks akan secara otomatis membungkus ke baris berikutnya. mewarisi Mewarisi nilai dari orang tua.Pengaruh nilai pada teks disajikan dalam Tabel. satu.
HTML5 CSS2.1 IE Cr Op Sa Fx
ruang putih Contoh
Teorema Terakhir Fermat
x n+Y n= Z n
di mana n adalah bilangan bulat > 2Hasil dari contoh ini ditunjukkan pada Gambar. satu.
Beras. 1. Menerapkan properti spasi putih
Model Objek
document.getElementById("elementID").style.whiteSpace
Browser
Internet Explorer hingga dan termasuk versi 7.0 tidak mendukung pre-line , pre-wrap , dan mewarisi nilai. Untuk