Bagaimana untuk membungkus teks dalam css

CSS ialah bahasa helaian gaya yang digunakan untuk reka bentuk web, yang boleh menjadikan halaman web lebih cantik dan mudah dibaca. Teks menduduki sebahagian besar halaman web, jadi cara membungkus teks adalah isu penting dalam reka bentuk CSS.

Dalam CSS, pemisah baris dipanggil pemisah baris atau pemisah perkataan Ini merujuk kepada cara membuat teks secara automatik membungkus atau menambah patah apabila panjang baris teks melebihi had tertentu. Berikut akan memperkenalkan cara melaksanakan pembalut teks dalam CSS.

1 Gunakan atribut "word-wrap" dalam CSS

Dalam CSS, anda boleh menggunakan atribut "word-wrap" untuk mengawal sama ada pembahagian perkataan dilakukan di tengah-tengah perkataan . Secara lalai, penyemak imbas akan secara automatik membalut perkataan ke dalam baris baharu, tetapi dengan menetapkan atribut "word-wrap", penyemak imbas boleh secara automatik memasukkan simbol sempang di tengah perkataan untuk mencapai kesan pembalut baris yang lebih baik. Kod khusus adalah seperti berikut:

p {
  word-wrap: break-word;
}

Gaya ini akan memecahkan baris perkataan apabila lebar bekas tidak mencukupi, dan memasukkan simbol sempang di tengah perkataan untuk memastikan integriti susunan.

2. Gunakan atribut "word-break" dalam CSS

Selain atribut "word-wrap", CSS juga menyediakan satu lagi atribut "word-break" untuk mengawal bukan CJK Pembalut baris aksara (Cina, Jepun dan Korea). Jika digunakan dengan tetapan lalai, "word-break" akan memecahkan perkataan di mana-mana dalam perkataan, yang boleh menyebabkan ketaksinambungan visual. Untuk menyelesaikan masalah ini, anda boleh menetapkan atribut "patah perkataan" kepada "simpan-semua" supaya baris tidak terputus pada perkataan. Kod khusus adalah seperti berikut:

p {
  word-break: keep-all;
}

3 Gunakan atribut "white-space" dalam CSS

Atribut "white-space" dalam CSS digunakan untuk mengawal ruang dan pemisah baris dalam. teks. Secara lalai, atribut "ruang putih" ditetapkan kepada "biasa", yang akan mengabaikan ruang tambahan dan pemisah baris dalam teks Jika anda ingin mengekalkan ruang dan pemisah baris ini, anda boleh menetapkan atribut "ruang putih". kepada "pra" atau "pra-bungkus". Kod khusus adalah seperti berikut:

p {
  white-space: pre-wrap;
}

Gaya ini akan mengekalkan ruang berterusan dan pemisah baris dalam bekas. Jika anda ingin memaksa pemisah baris dalam teks, anda boleh menggunakan teg "
", contohnya:

<p>这是第一行
这是第二行</p>

Di atas ialah tiga sifat gaya CSS yang biasa digunakan, yang boleh mengawal pemisah baris dengan berkesan dan paparan teks. Dalam reka bentuk web sebenar, kita boleh memilih atribut yang sesuai mengikut situasi sebenar untuk mencapai kesan terbaik.

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