Bagaimana untuk menghalang teks daripada membungkus menggunakan CSS

Dalam pembangunan web, teks bukan pembalut adalah keperluan yang sangat biasa. Sama ada teks dalam perenggan atau nama sekumpulan gambar, anda perlu mengelakkan perkataan yang panjang atau putus baris. Jadi bagaimana untuk mencapai teks tidak pecah melalui CSS?

Pertama, kita perlu memahami beberapa sifat CSS:

1. white-space

Harta ini digunakan untuk menetapkan cara aksara ruang kosong dalam elemen dikendalikan . Nilai atribut biasa ialah:

• normal: Aksara ruang putih tambahan akan diabaikan, aksara ruang putih berturut-turut akan digabungkan menjadi satu ruang dan garisan akan dipecahkan jika perlu
• pre : Aksara ruang kosong tambahan akan dikekalkan, tetapi aksara ruang putih tambahan tidak akan dibalut secara automatik >
• : Aksara ruang kosong tambahan akan dikekalkan, dan balut secara automatik apabila perlu nowrap
• : Abaikan aksara ruang putih tambahan, tetapi balut secara automatik apabila perlu pre-wrap
• pre-line

Atribut ini digunakan untuk menetapkan peraturan pemecahan baris perkataan. Nilai atribut biasa ialah:
2. word-break

: Benarkan pemisah baris dalam perkataan, sesuai untuk teks yang tidak terputus (seperti URL) )
• normal
: sebanyak mungkin, sesuai untuk teks yang terdiri daripada aksara berterusan seperti Cina dan Jepun
• break-all
• keep-all

Atribut ini digunakan untuk mengawal peraturan pemecahan baris dalam sempadan elemen, iaitu, ia mempengaruhi kedudukan pemecahan baris perkataan. Nilai atribut biasa ialah:
3. overflow-wrap

: Apabila perkataan melebihi sempadan unsur, paksa baris baharu
• normal
Seterusnya, kita boleh menggunakan atribut ini untuk menghalang teks daripada dibalut.
• break-wordKaedah 1: Gunakan
dan

kepada white-space dan atribut overflow-wrap kepada

white-spacenowrapDengan cara ini, apabila perkataan terlalu panjang dan melebihi sempadan unsur, penyemak imbas akan memaksanya untuk pecah dan terus dipaparkan pada baris seterusnya. overflow-wrapbreak-wordKaedah 2: Gunakan

p {
  white-space: nowrap;
  overflow-wrap: break-word;
}

kepada word-break dan atribut white-space kepada

word-breakkeep-allDengan cara ini, penyemak imbas akan cuba untuk tidak memecahkan baris dalam perkataan dan memecahkan perkataan apabila perlu, tanpa menjejaskan keindahan reka letak. white-spacenowrapKaedah 3: Gunakan

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

Untuk penyemak imbas yang tidak menyokong atribut

sebaliknya. Contohnya: word-wrap

Dengan cara ini, apabila perkataan terlalu panjang dan melebihi sempadan unsur, penyemak imbas akan memaksanya untuk pecah dan terus dipaparkan pada baris seterusnya. overflow-wrapword-wrapRingkasan

p {
  word-wrap: break-word;
}

Atas ialah kandungan terperinci Bagaimana untuk menghalang teks daripada membungkus menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!