Rumah  >  Artikel  >  hujung hadapan web  >  Pengenalan kepada teknologi pembalut bukan talian CSS3 dan contoh aplikasi

Pengenalan kepada teknologi pembalut bukan talian CSS3 dan contoh aplikasi

PHPz
PHPzasal
2023-04-24 09:07:38621semak imbas

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"> 会 保 留 所 有 空 格 
和 换 行 符 

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:Bincangkan secara terperinci operasi penambahan, pemadaman dan pengubahsuaian JavaScriptArtikel seterusnya:Bincangkan secara terperinci operasi penambahan, pemadaman dan pengubahsuaian JavaScript

Artikel berkaitan

Lihat lagi