Tafsiran sifat pemisah baris paksa CSS: pemecahan perkataan dan ruang putih

Tafsiran sifat pemisah baris paksa CSS: pemecahan perkataan dan ruang putih, contoh kod khusus diperlukan

Dalam pembangunan web, kaedah pemisah baris kandungan teks adalah isu yang sangat biasa dan penting. Kadangkala, kita perlu membalut teks panjang secara paksa agar sesuai dengan keperluan reka letak halaman atau meningkatkan kebolehbacaan. CSS menyediakan dua sifat untuk mengawal cara teks dibalut, iaitu word-break dan white-space. Atribut

1. word-break: Atribut

word-break menentukan tempat pemisah baris boleh berlaku. Ia mempunyai nilai berikut:

• biasa (lalai): bungkus dalam perkataan atau pada tanda sempang. Ini ialah tingkah laku lalai penyemak imbas.
• pecah-semua: Pecahkan baris dalam perkataan. Jika perlu, tanda sempang memisahkan perkataan.
• keep-all: Tiada pemisah baris, hanya pemisah baris dibenarkan pada ruang separuh lebar atau tanda sempang. Sifat ini digunakan untuk skrip bukan Latin.

Berikut ialah contoh kod khusus:

<style>
  .normal {
    word-break: normal;
  }
  
  .break-all {
    word-break: break-all;
  }
  
  .keep-all {
    word-break: keep-all;
  }
</style>

<div class="normal">This is a long text. This is a long text. This is a long text.</div>
<div class="break-all">This is a long text. This is a long text. This is a long text.</div>
<div class="keep-all">This is a long text. This is a long text. This is a long text.</div>

Dalam contoh di atas, kami mentakrifkan tiga elemen div, iaitu .normal, .break-all dan .keep-all. Dengan menambahkan kelas yang sepadan kepada elemen div yang berbeza, anda boleh melihat gelagat berbeza mereka semasa membungkus. Atribut

2. white-space: Atribut

white-space digunakan untuk menentukan cara mengendalikan aksara ruang putih dalam elemen. Ia mempunyai nilai berikut:

• normal (nilai lalai): Kaedah pemprosesan lalai, ruang berterusan, tab atau baris baharu akan digabungkan menjadi satu ruang dan teks akan dibalut secara automatik.
• nowrap: Tiada pemisah baris, ruang berturut-turut, tab atau baris baharu akan digabungkan menjadi satu ruang.
• pra: Kekalkan pemformatan asal dan pemisah baris aksara ruang putih.
• pra-bungkus: Mengekalkan pemformatan asal aksara ruang putih dan membenarkan teks dibalut secara automatik.
• prabaris: Kekalkan format asal aksara ruang putih, ruang berterusan, tab atau baris baharu akan digabungkan menjadi satu ruang dan membenarkan teks dibalut secara automatik.

Berikut ialah contoh kod khusus:

<style>
  .normal {
    white-space: normal;
  }
  
  .nowrap {
    white-space: nowrap;
  }
  
  .pre {
    white-space: pre;
  }
  
  .pre-wrap {
    white-space: pre-wrap;
  }
  
  .pre-line {
    white-space: pre-line;
  }
</style>

<div class="normal">This is a        long text.</div>
<div class="nowrap">This is a        long text.</div>
<div class="pre">This is a        long text.</div>
<div class="pre-wrap">This is a        long text.</div>
<div class="pre-line">This is a        long text.</div>

Dalam contoh di atas, kami mentakrifkan lima elemen div, iaitu .normal, .nowrap, .pre, .pre-wrap dan .pre-line. Dengan menambahkan kelas yang sepadan kepada elemen div yang berbeza, anda boleh melihat prestasi berbeza mereka apabila mengendalikan aksara ruang putih dan pemisah baris.

Dengan menggunakan atribut word-break dan white-space, kami boleh mengawal pembalut baris teks mengikut keperluan sebenar secara fleksibel, meningkatkan kesan reka letak halaman dan kebolehbacaan teks.

Ringkasan:

Artikel ini menerangkan sifat pemecah kata dan ruang putih CSS dan memberikan contoh kod khusus. Dengan menguasai penggunaan kedua-dua atribut ini, kami boleh mengawal cara pembalut teks dalam pembangunan web dengan lebih baik dan meningkatkan pengalaman pengguna. Nilai dan gabungan atribut yang berbeza boleh mencapai kesan yang berbeza, dan pembangun boleh memilih gabungan atribut yang sesuai untuk digunakan berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci Tafsiran sifat pemisah baris paksa CSS: pemecahan perkataan dan ruang putih. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!