Tafsiran sifat pengendalian ruang putih CSS: ruang putih dan pecah perkataan

Tafsiran sifat ruang putih CSS: ruang kosong dan pemecah kata

Apabila membangunkan halaman web, kita sering menghadapi situasi di mana kita perlu mengosongkan kandungan teks. CSS menyediakan beberapa sifat untuk mengawal simbol ruang putih dan pembungkusan perkataan dalam teks, menjadikan kandungan web lebih cantik dan boleh dibaca. Artikel ini akan menerangkan secara terperinci dua sifat pemprosesan ruang putih dalam CSS: ruang kosong dan pemecah kata, dan memberikan contoh kod khusus.

1. Atribut ruang putih

Atribut ruang putih digunakan untuk mentakrifkan kaedah pemprosesan simbol ruang putih dalam teks yang biasa digunakan adalah seperti berikut:

1. biasa: Memproses simbol ruang kosong secara normal. Aksara ruang putih berturut-turut digabungkan menjadi satu ruang dan baris baharu diabaikan.
2. nowrap: Abaikan baris baharu, semua aksara ruang putih akan digabungkan menjadi satu ruang dan teks tidak akan dibalut secara automatik.
3. pra: Kekalkan format asal aksara ruang kosong, jangan gabungkan atau abaikan mereka. Teks mengekalkan kedudukan asal aksara ruang putih seperti ruang dan baris baharu.

Berikut ialah contoh kod untuk lebih memahami peranan atribut ruang kosong:

<style>
pre {
  whitespace: normal;
}
</style>

<pre class="brush:php;toolbar:false">
  This    is    a    text
      with            spaces.

Dalam contoh di atas, kami menggunakan teg pra untuk membalut teks dengan berbilang ruang berturut-turut. Selepas menetapkan sifat ruang putih kepada normal, aksara ruang kosong berturut-turut digabungkan menjadi satu ruang, sekali gus membolehkan pemprosesan biasa teks.

2. Atribut patah perkataan

Atribut patah perkataan digunakan untuk menentukan cara teks dipecahkan apabila membungkus Nilai atribut yang biasa digunakan adalah seperti berikut:

1. biasa: Pisahkan perkataan secara normal. Apabila keseluruhan perkataan tidak boleh dimuatkan pada satu baris, perkataan itu dipisahkan ke baris seterusnya tanpa membelah perkataan pada baris baharu.
2. pecah-semua: Benarkan perkataan terputus antara mana-mana aksara. Apabila keseluruhan perkataan tidak sesuai pada satu baris, perkataan itu dipecahkan antara mana-mana aksara mengikut keperluan.
3. keep-all: Jangan paksa pemutusan baris, hanya benarkan pemisah baris pada ruang separuh lebar atau tanda sempang. Aksara bukan ruang putih berturut-turut akan dilayan secara keseluruhan dan perkataan tidak akan dipisahkan semasa membalut.

Berikut ialah contoh kod untuk lebih memahami peranan atribut pemecah kata:

<style>
div {
  width: 200px;
  word-break: break-all;
}
</style>

<div>
  ThisIsAReallyLongWordThatCannotFitInTheContainer.
</div>

Dalam contoh di atas, kami menggunakan elemen div untuk membungkus perkataan panjang yang melebihi lebar bekas. Selepas menetapkan atribut pemecahan perkataan kepada pemecah-semua, perkataan akan dipecahkan antara mana-mana aksara mengikut keperluan, sekali gus merealisasikan pembungkusan baris perkataan panjang secara automatik.

Ringkasan:

Sifat ruang putih dan pemisah kata dalam CSS memberikan kawalan ke atas ruang putih teks dan pembungkusan perkataan. Dengan menggunakan atribut ini dengan betul, kami boleh memproses kandungan teks dengan lebih baik dan menjadikan persembahan halaman web lebih cantik dan boleh dibaca. Semoga contoh kod khusus yang disediakan dalam artikel ini akan membantu pembaca memahami dan menggunakan kedua-dua sifat ini dengan lebih baik.

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