Css memaksa putus string panjang

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;

Nilai

Di properti

overflow-wrap: anywhere;

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: normal

ii. ) 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

overflow-wrap: anywhere;

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;

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

word-wrap: normal | break-word | initial | inherit;

Contoh word-wrap

overflow-wrap: anywhere;

overflow-wrap: anywhere;

#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;

i. ) biasa

Program ini menggunakan aturan jeda baris. Sebagai default, properti ini memiliki nilai ini

overflow-wrap: anywhere;

ii. ) 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;

aku 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;

iv. ) 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

overflow-wrap: anywhere;

Sintaksis

overflow-wrap: anywhere;

Contoh kata break

overflow-wrap: anywhere;

overflow-wrap: anywhere;

Penutup

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

Bagaimana Anda memutuskan string panjang di CSS?

Bagaimana Anda memaksa jeda baris dalam kata yang panjang di div?

Bagaimana cara memaksa kata yang panjang untuk dibungkus dalam CSS?

Bagaimana cara membagi string dalam CSS?