Pengenalan kepada teknologi pembalut bukan talian CSS3 dan contoh aplikasi

Tidak membalut CSS3 merujuk kepada menetapkan gaya dalam kandungan teks supaya ia tidak akan membalut secara automatik apabila ia menemui penghujung baris, tetapi akan terus memanjang ke baris seterusnya. Teknik ini sering digunakan untuk mereka bentuk satu baris teks atau kawasan kod, dsb., untuk menjadikan halaman kelihatan lebih kemas dan jelas.

Dalam CSS3, terdapat dua kaedah yang biasa digunakan untuk mencapai pembalut baris: ruang putih dan bungkus perkataan. Seterusnya kami akan memperkenalkan setiap satu dan memberi contoh aplikasi.

1. ruang putih

Atribut ruang putih mentakrifkan cara mengendalikan ruang putih dalam elemen.

Atribut ini mempunyai nilai pilihan berikut:

1. biasa: Lalai. Abaikan ruang kosong tambahan.
2. nowrap: Teks tidak dibalut.
3. pra: Kekalkan semua ruang dan baris baharu.
4. pra-bungkus: Simpan semua ruang dan baris baharu, tetapi bungkusnya.
5. pra-baris: Abaikan ruang putih tambahan, tetapi kekalkan baris baharu.

Contoh aplikasi:

<style>
    .nowrap {
        white-space: nowrap; /*文本不换行*/
    }
    .pre {
        white-space: pre; /*保留所有空格与换行符*/
    }
</style>
<div class="nowrap">这是一段不会换行的文本</div>
<div class="pre">这是一段<pre class="brush:php;toolbar:false"> 会 保 留 所 有 空 格 
和 换 行 符 

Salin selepas log masuk

2. word-wrap

Atribut word-wrap digunakan untuk menentukan sama ada perkataan yang terlalu panjang boleh dibalut. dalam baris baru dipotong dan diletakkan pada baris kedua. Dalam aplikasi praktikal, apabila menetapkan lebar bekas yang lebih sempit, jika kita tidak mahu perkataan dipotong tetapi mahu dapat membungkus garisan, kita harus menetapkan atribut ini.

Atribut ini mempunyai nilai pilihan berikut:

1. biasa: Lalai. Pemisahan baris hanya pada titik sempang yang dibenarkan (pelayar dikhaskan).
2. kata putus: Pecah baris di dalam perkataan panjang atau alamat url.

Contoh aplikasi:

<style>
    .break-word{
        word-wrap:break-word;
    }
</style>
<div style="width:100px;border:1px solid #000;">
    <p class="break-word">这是一个很长很长很长的单词：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

Di atas ialah pengenalan dan contoh aplikasi teknologi pembalut bukan talian CSS3. Melalui penggunaan teknologi pembalut bukan talian yang munasabah, halaman boleh dibuat lebih fleksibel dan kebolehskalaan reka bentuk boleh ditingkatkan.

Atas ialah kandungan terperinci Pengenalan kepada teknologi pembalut bukan talian CSS3 dan contoh aplikasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!