Daya tanggap situs web sangat signifikan akhir-akhir ini agar dapat ditampilkan dengan benar di semua perangkat. Meskipun Anda telah mencoba yang terbaik, tata letak yang rusak masih dapat terjadi meskipun Anda sudah berusaha sebaik mungkin
Kata-kata yang panjang dapat dipecah dan dibungkus ke baris berikutnya saat Anda menggunakan properti pembungkus kata CSS. String yang terlalu panjang dapat meluapkan wadah dalam banyak kasus, jadi metode ini dapat membantu mencegah luapan
Alasan tata letak yang rusak adalah karena kata-kata tertentu terlalu panjang untuk menampung wadahnya. Anda dapat mengalami limpahan konten saat berhadapan dengan konten buatan pengguna
Misalnya, bagian komentar dari posting blog tunduk pada luapan konten. Hasilnya adalah Anda harus menerapkan gaya pada konten Anda untuk mencegahnya meluap dari wadahnya
Daftar isi
# 1 luapan-bungkus
Dengan mendefinisikan overflow-wrap: anywhere;_9, browser dapat memisahkan baris dalam string yang tidak dapat dipecahkan untuk mencegah konten meluap
Nilai
Di properti overflow-wrap: anywhere;_9, hanya ada tiga nilai. normal, break-word, dan di mana saja. Mendefinisikan properti word-wrap menggunakan overflow-wrap dianggap sebagai nama standar
i. ) biasa
Garis hanya akan diputus sesuai dengan aturan normal garis putus. Jika wadah meluap, kata-kata tidak akan pecah. Sebagai default, properti ini mengambil nilai ini
overflow-wrap: normalii. ) di mana saja
Kecuali jika ada breakpoint lain yang dapat diterima di baris tersebut, kata-kata panjang dan URL akan terputus kapan saja. Bahkan jika properti tanda hubung diatur, karakter tanda hubung tidak akan rusak
aku aku aku. ) kata putus
Untuk memaksakan jeda baris, kata-kata panjang dan rangkaian karakter yang tidak sesuai di dalam wadahnya akan putus pada titik yang ditempatkan secara sewenang-wenang, tetapi peluang pembungkusan halus yang diakrabkan dengan jeda kata tidak dimasukkan ke dalam pernyataan saat menghitung ukuran intrinsik konten-min
overflow-wrap: break-word;_Sintaksis
overflow-wrap: normal | anywhere | break-word | initial | inherit;Contoh overflow-wrap
<style> body { display: grid; place-items: center; min-height: 100vh; margin: 0; color: #fff; background-image: linear-gradient(20deg, #b3f6d8, #007ea7); font: 1.5rem/1.333 'Oxygen Mono', monospace; overflow-x: hidden; } @media (max-width: 500px) { body { font-size: 1.125rem; } } main { position: relative; margin: 15px 10px; } main::after { content: ''; display: block; position: absolute; top: 16px; left: calc(28ch + 9px); bottom: 0; border-left: 2px dashed #fff6; } h1 { position: relative; z-index: 2; width: min-content; margin: 0 10px; padding: 5px 10px; border-radius: 4px; background-color: #000; font-weight: normal; font-size: 0.667em; white-space: nowrap; transform: translateY(50%); } p { width: 28ch; margin: 0 0 15px; padding: 20px 10px 10px; border-radius: 4px; background-color: #0006; } .break-word { overflow-wrap: break-word; } .anywhere { overflow-wrap: anywhere; } .unset { overflow-wrap: unset; } </style><main> <h1>normal</h1> <p> Pneumonoultramicroscopicsilicovol </p> <h1>overflow-wrap: break-word</h1> <p class="break-word"> Pneumonoultramicroscopicsilicovol </p> <h1>overflow-wrap: anywhere</h1> <p class="anywhere"> Pneumonoultramicroscopicsilicovol </p> <h1>overflow-wrap: unset</h1> <p class="unset"> Pneumonoultramicroscopicsilicovol </p> </main># 2 bungkus kata
Baris dibungkus menjadi kata-kata dalam properti word-wrap agar muat di dalam container. Kata-kata yang tidak bisa dipecahkan bahkan bisa dipatahkan oleh properti ini
Properti word-wrap di CSS memecah kata-kata panjang menjadi beberapa baris dan membungkusnya ke baris berikutnya. Untuk mencegah masalah tata letak yang timbul dari string teks yang meluap, pembungkus luapan digunakan
Nilai
Di properti overflow-wrap: break-word;_1, salah satu dari nilai berikut dapat ditentukan
i. ) biasa
Ini adalah pengaturan default. Terlepas dari apakah sebuah kata atau string yang tidak terputus meluap dari wadah, browser akan memutuskan garis sesuai dengan aturan pemutusan garis normal
word-wrap: normal;_ii. ) kata putus
Pemisahan baris akan dipaksakan di sembarang tempat jika kata atau string karakter terlalu besar untuk wadahnya. Dengan menggunakan properti tanda hubung, karakter tanda hubung tidak akan dirender
word-wrap: break-word;aku aku aku. ) mewarisi
Setelah mewarisi properti overflow-wrap dari induk langsungnya, elemen yang ditargetkan harus mewarisi nilainya
word-wrap: inherit;Sintaksis
Di CSS, word-wrap memiliki sintaks berikut
Contoh word-wrap
overflow-wrap: anywhere;0overflow-wrap: anywhere;1#3 jeda kata
Ketika kotak konten akan meluap, jeda baris disisipkan menggunakan properti CSS word-break
Jeda baris biasanya hanya disisipkan jika ada spasi atau tanda hubung di dalam spasi. Namun demikian, saat properti word-break diatur ke break-all, browser akan memecah baris di mana pun baris tersebut muncul
Dengan menggunakan properti CSS word-break, kata-kata dapat dipecah atau dipisahkan tergantung di mana mereka muncul dalam satu baris. Menggunakan properti word-wrap, kata-kata yang panjang dapat dipisahkan/dipecah dan dibungkus ke dalam baris berikutnya
Nilai
Di bawah ini adalah daftar nilai yang dapat digunakan untuk menentukan properti overflow-wrap: break-word;2
i. ) biasa
Program ini menggunakan aturan jeda baris. Sebagai default, properti ini memiliki nilai ini
overflow-wrap: anywhere;_2ii. ) istirahat-semua
Dengan menentukan nilai ini, jeda akan dibuat tepat di mana teks akan meluap dari wadah jika dibiarkan tidak terputus. Akibatnya, akan sulit dibaca karena merusak kata dalam karakter apa pun
overflow-wrap: anywhere;_3aku aku aku. ) menyimpan semua
Tidak disarankan menggunakan jeda kata saat menulis teks bahasa Mandarin/Jepang/Korea (CJK). Perilaku teks non-CJK sama dengan teks CJK
overflow-wrap: anywhere;_4iv. ) kata putus
Jika dibiarkan tidak berubah, teks akan meluap dari penampung pada titik yang tepat di mana ia akan pecah. Akibatnya, kata tersebut akan sulit dibaca jika dipecah oleh karakter apapun
Sintaksis
overflow-wrap: anywhere;_6Contoh kata break
overflow-wrap: anywhere;7overflow-wrap: anywhere;8Penutup
Nama alternatif dari nama warisan Word-wrap adalah overflow-wrap. Oleh karena itu keduanya dapat digunakan secara bergantian. Meskipun demikian, properti overflow-wrap tidak didukung dengan baik oleh semua browser
Jika Anda menginginkan dukungan browser yang hampir universal, Anda harus menggunakan word-wrap daripada overflow-wrap. Word-wrap harus terus didukung oleh browser dan agen pengguna untuk alasan warisan, menurut spesifikasi draf CSS3
Jika mungkin cukup menggunakan overflow-wrap atau nama warisannya Word-wrap jika Anda ingin menangani konten yang melimpah
Fungsi pemecah kata juga dapat digunakan untuk memecah kata di antara dua karakter saat kata melebihi wadahnya. Dengan word-break, Anda harus berhati-hati karena dukungan browser terbatas, mirip dengan overflow-wrap
Pemantauan Pengguna Nyata dengan Status
Atatus memungkinkan Anda untuk mendapatkan visibilitas ke bagian situs web Anda yang berkinerja buruk yang berdampak negatif pada pengguna akhir Anda melalui solusi pemantauan pengguna akhir yang dapat diskalakan. Tingkatkan pengalaman pengguna dengan pemahaman yang lebih baik tentang error performa front-end Anda
Tingkatkan kinerja pengguna akhir dengan mendiagnosis masalah front-end kompleks yang timbul dari waktu pemuatan halaman yang lambat, perubahan rute, aset statis yang terlambat, XMLHttpRequest yang buruk, dan kesalahan JS
Selain Data Web Inti Google dan Data Web Lainnya, kami mengumpulkan data performa penting yang membantu Anda memahami penyebab lambatnya performa di tingkat pengguna jika mereka mengalami waktu pemuatan yang lambat, perubahan mendadak, atau kesulitan berinteraksi dengan halaman
Identifikasi dan selesaikan masalah kinerja front-end yang memengaruhi pengguna nyata dengan tampilan mendalam dari setiap peristiwa pemuatan halaman. Identifikasi aset mana yang memperlambat halaman Anda menggunakan tampilan air terjun sumber daya lengkap yang mendetail, yang memungkinkan Anda memfilter menurut URL, jenis koneksi (2G, 3G, 4G), perangkat, negara, dan lainnya
Identifikasi masalah performa dan perilaku pengguna tanpa mengharuskan pengguna memuat halaman. Rute Aplikasi Halaman Tunggal menunjukkan bagaimana interaksi pengguna memengaruhi kinerja terlepas dari kerangka kerja JavaScript, menunjukkan bagaimana interaksi pengguna memengaruhi pengalaman mereka setelah halaman dimuat