Apakah kaedah yang boleh digunakan untuk menghalang teks CSS daripada dibalut?

CSS ialah bahagian penting dalam pembangunan bahagian hadapan Ia boleh memberikan gaya yang cantik dan kesan reka letak yang sangat baik untuk halaman web. Dalam proses susun atur halaman web, susun atur teks adalah pautan yang sangat penting. Kadangkala, kita perlu membuat sekeping teks tidak mempunyai pemisah baris tanpa menambah ruang atau titik putus. Jadi, apakah kaedah yang ada untuk menghalang teks CSS daripada dibalut?

1. atribut ruang putih

Atribut ruang putih ialah kaedah pemprosesan yang digunakan dalam CSS untuk menetapkan ruang kosong dalam elemen dan boleh mengawal sama ada teks secara automatik membalut. Atribut ini mempunyai nilai berikut:

• normal: nilai lalai, teks akan dibalut secara automatik apabila menemui aksara atau ruang baris baharu
• nowrap: teks tidak akan dibalut, dipaksa untuk menjadi dalam baris yang sama Paparan
• pra: Teks mengekalkan ruang dan pemisah baris, dan dipaparkan dalam format asal
• pra bungkus: Teks mengekalkan ruang dan pemisah baris, tetapi akan membalut secara automatik
• pra-baris : Teks mengekalkan pemisah baris, tetapi ruang akan diabaikan jika terdapat berbilang ruang, ia akan digabungkan menjadi satu ruang dan teks akan dibalut secara automatik 🎜> Kita boleh menggunakan atribut ruang putih untuk menetapkan nilai Untuk nowrap, capai kesan teks bukan pembalut. Contohnya:

Dengan cara ini, teks dalam teg p tidak akan dibalut secara automatik apabila menemui ruang atau aksara baris baharu, tetapi akan sentiasa dipaparkan pada baris yang sama.

p{
  white-space: nowrap;
}

atribut limpahan-teks

2. Kadangkala, kami mahu teks yang panjang dapat memaparkan kandungan teks yang lengkap tanpa membalut. Anda boleh menggunakan atribut limpahan teks pada masa ini.

Atribut limpahan teks digunakan dalam CSS untuk mengawal mod paparan teks apabila ia melimpah. Atribut ini mempunyai nilai berikut:

klip: Nilai lalai, bahagian limpahan teks dipotong dan tidak akan dipaparkan

elipsis: Bahagian limpahan memaparkan elipsis
• rentetan: Paparkan rentetan yang ditentukan dalam bahagian limpahan
• Kita boleh menetapkan nilai atribut limpahan teks kepada elipsis berdasarkan atribut ruang putih, supaya teks panjang boleh dipaparkan tanpa membungkus kandungan lengkap dan memaparkan kesan elipsis. Contohnya:

Dengan cara ini, apabila teks dalam teg p melebihi had lebar, elips akan dipaparkan, tetapi garisan tidak akan dibalut.

p{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

atribut pemecah kata

Aksara sesetengah bahasa tidak dibenarkan dipisahkan dan dibalut sesuka hati, seperti bahasa Cina, Jepun dan Korea. Dalam kes ini, kita boleh menggunakan atribut patah perkataan untuk mengawal cara perkataan membungkus secara automatik.
3. Atribut patah perkataan digunakan untuk mengawal cara huruf dan aksara berterusan diproses apabila teks dibalut secara automatik. Atribut ini mempunyai nilai berikut:

normal: Nilai lalai, menggunakan peraturan pemecahan baris lalai penyemak imbas

pecah-semua: Pecah baris dalam perkataan

• simpan- semua: Jangan putuskan baris dalam perkataan
• Kita boleh menetapkan nilai atribut patah perkataan kepada simpan-semua berdasarkan atribut ruang putih, untuk mencapai ini tanpa memusnahkan semantik. Jauhkan teks daripada dibungkus. Contohnya:

Dengan cara ini, walaupun teks melebihi had lebar, ia tidak akan memutuskan baris dalam perkataan.

Ringkasan

p{
  white-space: nowrap;
  word-break: keep-all;
}

Di atas memperkenalkan tiga kaedah untuk menghalang teks CSS daripada membungkus. Ia menggunakan atribut ruang putih, atribut limpahan teks dan atribut pemecah kata. Apabila kita perlu menghalang teks daripada membungkus, kita boleh memilih untuk menggunakan satu atau lebih kaedah ini mengikut situasi sebenar. Perlu diingatkan bahawa apabila menggunakan atribut ini, ia perlu diselaraskan mengikut situasi sebenar untuk mencapai hasil yang terbaik.

Atas ialah kandungan terperinci Apakah kaedah yang boleh digunakan untuk menghalang teks CSS daripada dibalut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!