css tidak membungkus dan css membungkus

CSS ialah komponen teknikal yang penting dalam pembangunan bahagian hadapan boleh digunakan untuk mengoptimumkan dan mencantikkan halaman web. Satu aspek yang sangat penting ialah melaraskan susun atur dan gaya teks. Terdapat dua sifat yang biasa digunakan dalam CSS: tiada pembalut baris dan pembalut baris. Tetapan atribut yang berbeza boleh menghasilkan kesan yang berbeza.

CSS tidak memecahkan baris

Atribut ruang putih dalam CSS boleh digunakan untuk mengawal sama ada teks dipecahkan mempunyai nilai berikut yang boleh ditetapkan:

• biasa: nilai lalai , pembalut baris automatik
• nowrap: tiada pembalut baris
• pra: kekalkan semua ruang dan baris baharu
• pra-balut: kekalkan baris baharu, tetapi akan membalut secara automatik
• pra-baris: mengekalkan ruang dan baris baharu, tetapi akan membalut secara automatik

Antaranya, nilai nowrap boleh menghalang teks daripada dibalut. Nilai ruang putih diwarisi dan boleh ditetapkan dalam elemen induk dan kemudian diwarisi kepada elemen anak.

Sebagai contoh, dalam kod berikut, elemen div tidak akan membalut secara automatik apabila teks terlalu panjang, tetapi akan terus dilanjutkan.

<div style="white-space: nowrap;">
  这是一个不会换行的超长文本测试，看看会不会出现换行。
</div>

Pemutus baris CSS

Begitu juga, anda juga boleh menggunakan atribut pemecah kata dan pembungkus perkataan dalam CSS untuk mengawal pemisah baris.

• Atribut pemecahan perkataan boleh mengawal pemisah baris dalam perkataan, dan biasanya digunakan untuk mengawal teks yang berbeza seperti perkataan Inggeris dan bahasa Cina. Nilainya adalah seperti berikut:

  • biasa: Nilai lalai, gunakan kaedah pembalut baris lalai penyemak imbas
  • keep-all: Simpan semua perkataan dalam satu baris, tanpa pembalut baris automatik
  • pecah-semua: Apabila satu aksara terlalu panjang, paksa putus baris (tanpa mengira sempadan perkataan)
  • kata putus: Apabila keseluruhan perkataan terlalu panjang, paksa putus baris

Contohnya, dalam kod berikut, teks elemen p terpaksa dibalut apabila aksara tunggal terlalu panjang melalui atribut pemecah kata.

<p style="word-break: break-all;">
  这里有一段texttexttexttexttexttexttexttexttexttexttext的文本。
</p>

• Atribut balutan perkataan digunakan untuk mengawal sama ada teks mengekalkan sempadan perkataan semasa membalut. Nilainya adalah seperti berikut:

  • biasa: Nilai lalai, gunakan kaedah pemisah baris lalai penyemak imbas
  • kata putus: Apabila perkataan terlalu panjang, pemutusan baris dipaksa , tetapi sempadan perkataan dikekalkan

Sebagai contoh, dalam kod berikut, teks elemen div ditetapkan melalui atribut word-wrap untuk memaksa pembalut baris apabila perkataan terlalu panjang, tetapi perkataan sempadan dikekalkan.

<div style="word-wrap: break-word;">
  这里有一段texttexttexttexttexttexttexttexttexttexttext的文本。
</div>

Kesimpulan

Dalam CSS, melalui atribut ruang putih, pemecah kata dan pembungkus perkataan, anda boleh mengawal secara fleksibel sama ada teks dibalut atau tidak. Dalam pembangunan sebenar, atribut yang sesuai boleh dipilih dan ditetapkan mengikut keperluan khusus untuk mencapai pengalaman membaca dan kesan estetik yang terbaik.

Atas ialah kandungan terperinci css tidak membungkus dan css membungkus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!