Cara menggunakan CSS untuk mencapai pemisah baris (tiga kaedah)

Balut baris merujuk kepada gelagat bergerak secara automatik ke baris seterusnya apabila teks atau kandungan lain sampai ke penghujung baris. Dalam reka bentuk web, pemisah baris yang betul boleh menjadikan halaman kelihatan lebih selesa dan semula jadi. Dalam CSS, mencapai pemisah baris yang betul memerlukan pemahaman beberapa prinsip dan teknik. Artikel ini akan memperkenalkan anda kepada beberapa kaedah tentang cara menggunakan CSS untuk mencapai pemisah baris.

Kaedah 1: Gunakan word-wrap

Dalam CSS3, atribut word-wrap disediakan, yang boleh digunakan untuk mengawal cara teks membungkus. Atribut ini mempunyai nilai berikut:

• normal: nilai atribut lalai, yang bermaksud bahawa teks tidak terhad dan boleh melebihi sempadan; teks melebihi sempadan , memotong perkataan secara automatik dan membalut perkataan itu, tetapi jika perkataan itu sendiri sangat panjang, ia masih akan melebihi sempadan
• di mana-mana sahaja: bermakna teks boleh membungkus di mana-mana sahaja; 🎜>overflow-wrap: bermakna teks boleh membalut di mana-mana sahaja Balutkan "perkataan" dan potong baris baharu jika perkataan yang panjang ditemui.
• Menggunakan word-wrap juga sangat mudah, anda hanya perlu menetapkan atribut yang sepadan dalam CSS. Contohnya:

Kod di atas akan menyebabkan teks dalam elemen p dipotong secara automatik apabila ia menemui sempadan dan dibalut mengikut panjang perkataan.

Kaedah 2: Gunakan word-break

p {
  word-wrap: break-word;
}

Word-wrap bukanlah penyelesaian yang ideal kerana kadangkala anda ingin mengelak daripada memotong sesuatu perkataan dan sebaliknya mahu ia dibungkus di mana-mana sahaja. Dalam kes ini kita boleh menggunakan atribut word-break. Atribut

word-break mempunyai nilai berikut:

normal: Nilai atribut lalai bermaksud teks dihadkan dan pemotongan di tengah perkataan tidak dibenarkan.

pecah-semua: menunjukkan pemisah baris di mana-mana, walaupun di tengah-tengah perkataan. Walau bagaimanapun, ia akan memusnahkan integriti perkataan dan tidak disyorkan.

• keep-all: Menunjukkan bahawa teks hanya dipecahkan pada ruang atau tanda sempang, sesuai untuk bahasa Asia dan bahasa lain yang tidak menggunakan ruang.
• Sebagai contoh, jika anda ingin memecahkan aksara Cina yang lengkap dalam pemisah baris teks, anda boleh menggunakan kod berikut:

Kaedah 3: Gunakan ruang putih

White-space ialah sifat yang digunakan dalam CSS untuk mengawal ruang dan pemisah baris dalam teks. Ia mempunyai nilai berikut:

p {
  word-break: break-all;
}

normal: nilai atribut lalai, yang bermaksud bahawa berbilang ruang dan baris baharu dalam teks akan digabungkan menjadi satu ruang

pra: bermakna ada ialah berbilang ruang dalam teks Ruang dan pemisah baris akan dikekalkan dan tidak akan digabungkan;

• nowrap: menunjukkan bahawa teks tidak akan dibalut secara automatik.
• pra-bungkus: Menunjukkan bahawa berbilang ruang dan pemisah baris dalam teks akan dikekalkan, tetapi garisan akan dibalut secara automatik dan tiada bar skrol mendatar akan muncul.
• pra-baris: Menunjukkan bahawa berbilang ruang dalam teks akan digabungkan menjadi satu ruang, tetapi pemisah baris akan dikekalkan, pembalut baris automatik dan bar skrol mendatar tidak akan muncul.
• Sebagai contoh, dalam beberapa baris ulasan kod, jika anda ingin mengekalkan ruang asal dan pemisah baris, anda boleh menggunakan kod berikut:

Ini boleh memastikan bahawa teks adalah dalam Format yang ditunjukkan pada halaman adalah konsisten dengan format dalam kod asal.

Ringkasan

.comment {
  white-space: pre;
}

Dalam CSS, untuk mencapai pemisah baris yang betul memerlukan mengetahui beberapa helah. Gunakan tiga sifat balut perkataan, pemecah kata dan ruang putih untuk mencapai pembungkusan baris automatik, pemecahan perkataan dan pengekalan ruang putih teks. Pemisahan baris yang betul boleh menjadikan halaman lebih mudah dibaca, cantik dan profesional.

Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencapai pemisah baris (tiga kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!