Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menetapkan tiada gaya pemisah baris dalam css

Bagaimana untuk menetapkan tiada gaya pemisah baris dalam css

PHPz
PHPzasal
2023-04-24 09:11:201697semak imbas

CSS (Cascading Style Sheets) ialah bahasa gaya yang digunakan untuk menerangkan cara halaman web (dokumen HTML) dipaparkan. Ia membolehkan kami mengawal penampilan dan susun atur elemen seperti warna, fon, saiz dan kedudukan dalam dokumen HTML dengan menetapkan gaya.

Kadang-kadang, kita mungkin ingin mengelak pemisah baris di tempat tertentu dalam halaman web dan memastikan ia dipaparkan pada baris yang sama. Pada masa ini, kita boleh menggunakan CSS untuk menetapkan tiada pemisah baris.

Terdapat banyak cara untuk menetapkan CSS supaya tidak membalut garisan di bawah ini kami akan memperkenalkan dua kaedah biasa.

  1. Gunakan atribut ruang putih

Atribut ruang putih digunakan untuk menetapkan cara ruang putih (ruang, pemisah baris, dll.) di dalam elemen dikendalikan . Secara lalai, nilai atribut ruang putih adalah normal, iaitu, apabila terdapat aksara ruang putih berturut-turut, ia akan digabungkan menjadi satu ruang dan apabila aksara baris baharu ditemui, baris tersebut akan dibalut secara automatik.

Jika anda ingin menghalang kandungan di dalam elemen daripada dibalut, anda boleh menetapkan nilai atribut ruang putih kepada nowrap. Kod sampel adalah seperti berikut:

<style>
    .nowrap {
        white-space: nowrap;
    }
</style>
<div class="nowrap">这是一段不换行的文本,当文本过长时不会自动换行。</div>
  1. Menggunakan unsur pseudo CSS::sebelum dan ::selepas

elemen pseudo CSS::sebelum dan :: selepas boleh berada dalam satu elemen Masukkan sekeping kandungan sebelum atau selepas. Menggunakan ciri ini, kita boleh memasukkan elemen kosong supaya kandungan tidak akan dibalut secara automatik.

Secara khususnya, kita boleh memasukkan elemen blok sebaris kosong dengan menetapkan atribut kandungan ::sebelum atau ::selepas kepada rentetan kosong, dan kemudian menetapkan atribut paparan kepada blok sebaris atau elemen sebaris untuk mencapai kesan tiada garis putus. Kod sampel adalah seperti berikut:

<style>
    .nowrap {
        white-space: nowrap;
    }
    .no-wrap::before,
    .no-wrap::after {
        content: "";
        display: inline-block;
    }
</style>
<div class="no-wrap">这是一段不换行的文本,当文本过长时不会自动换行。</div>

Di atas ialah dua kaedah CSS yang biasa digunakan untuk menetapkan tiada pemisah baris. Perlu diingatkan bahawa kesan tiada pembalut baris hanya berkesan dalam elemen semasa Jika anda ingin menghalang keseluruhan halaman web daripada membalut secara automatik, anda perlu menggunakan tetapan pada elemen badan.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan tiada gaya pemisah baris dalam css. 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