Cara Membungkus Teks Ke Baris Baru di CSS

Cara Membungkus Teks Ke Baris Baru di CSS

Teks panjang dapat tampak tidak terkendali selama desain web. Tetapi mereka juga tidak dapat dihindari, dan terkadang mereka akhirnya melintasi perbatasan. Ini dapat membuat Model Objek Dokumen (DOM) longgar dengan luapan yang tidak perlu yang tidak ramah pengguna.





Tapi inilah kabar baiknya: Anda dapat menangani teks yang begitu panjang dengan membungkusnya ke baris baru menggunakan CSS. Di sini kami akan menunjukkan cara membungkus teks yang panjang dan tidak terputus dengan CSS.





Bagaimana Pembungkus Teks CSS Bekerja

CSS menangani kata-kata panjang yang diregangkan menggunakan inbuilt bungkus kata atau overflow-wrap Properti.





tidak ada suara di pc windows 10

Namun, bila tidak dikontrol, browser menangani teks panjang seperti itu secara default. Mereka tidak akan membungkus kata-kata panjang sampai mereka menerima instruksi untuk melakukannya.

Terkait: Apa yang Perlu Anda Ketahui Tentang DOM



Dua properti CSS utama yang disebutkan sebelumnya bekerja dengan cara yang sama dan Anda dapat menggunakannya secara bergantian. Namun, mereka menerima empat nilai atau sintaks:

  • kata putus asa : Ini adalah sintaks CSS sebenarnya yang memberi tahu browser untuk membungkus teks panjang ke baris baru.
  • normal : Ini memecah setiap kata pada titik pemisahan normal dalam DOM. Itu tidak berpengaruh pada string panjang.
  • awal : Ini adalah cara browser default menangani string. Seperti normal sintaks, itu tidak merusak kata-kata panjang.
  • mewarisi : Ini memberitahu elemen anak untuk mewarisi properti dari induknya. Tapi itu masih tidak berfungsi dengan teks panjang, kecuali Anda melamar kata putus asa ke elemen induk.

Cara Membungkus Kata Panjang Menggunakan CSS Word Wrap

Membungkus kata ke baris baru dengan CSS itu mudah dan tidak memerlukan tweak CSS yang rumit untuk bekerja.





Misalnya, panjang h2 teks di dalam wadah teks pada contoh gambar di bawah ini melintasi garis batas:

Mari kita lihat bagaimana kita bisa membungkusnya ke baris berikutnya menggunakan bungkus kata properti CSS:





HTML :


This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above

CSS :

.wrap-it{
word-wrap: break-word;
}

Setelah membungkus panjang h2 teks dalam contoh gambar, inilah hasilnya:

Itu dia! Anda sekarang tahu cara membungkus kata-kata ke baris baru di dalam DOM Anda menggunakan CSS.

bilah tugas windows 10 tidak berfungsi

Terkait: Cara Menargetkan Bagian dari Halaman Web Menggunakan Pemilih CSS

Namun, seperti yang dinyatakan sebelumnya, bungkus kata dan overflow-wrap bekerja dengan cara yang sama dan menerima sifat yang serupa.

Menggunakan overflow-wrap sebagai gantinya, ganti saja bungkus kata dengan itu.

Sangat Penting untuk Membungkus Kata di Halaman Web

Selain menambahkan lebih banyak estetika ke halaman web Anda, membungkus teks akan memadatkan DOM. Bahkan jika Anda mengontrol apa yang masuk ke bagian konten Anda, pengguna dapat mengeposkan tautan atau kata lain yang tidak sesuai dengan penampung teks Anda atau seluruh DOM Anda.

Oleh karena itu, menerapkan bungkus teks ke bagian seperti itu diperlukan untuk menjaga DOM tetap utuh.

apakah windows 10 akan gratis lagi
Membagikan Membagikan Menciak Surel Cara Menggunakan Kueri Media dalam HTML dan CSS untuk Membuat Situs Web yang Responsif

Ingin membuat situs web Anda terlihat luar biasa di perangkat seluler? Saatnya mempelajari cara menggunakan kueri media dalam CSS.

Baca Selanjutnya
Topik-topik yang berkaitan
  • Pemrograman
  • CSS
  • Model Objek Dokumen
Tentang Penulis Idisou Omisola(94 Artikel Diterbitkan)

Idowu bersemangat tentang teknologi dan produktivitas apa pun yang cerdas. Di waktu luangnya, dia bermain-main dengan coding dan beralih ke papan catur ketika dia bosan, tetapi dia juga suka melepaskan diri dari rutinitas sesekali. Semangatnya untuk menunjukkan kepada orang-orang tentang teknologi modern memotivasinya untuk menulis lebih banyak.

More From Idowu Omisola

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan