css tidak membungkus gaya

Dalam reka bentuk web, keindahan dan kebolehbacaan reka letak adalah penting untuk pengalaman pengguna halaman. Jika teks panjang tidak boleh dibalut secara automatik, ia akan menjejaskan pengalaman membaca pengguna Ia bukan sahaja menjejaskan keindahan halaman, tetapi juga mengurangkan pengalaman pengguna. Oleh itu, apabila mereka bentuk halaman web, cara menggunakan gaya CSS dengan betul untuk mencapai pembungkusan perkataan automatik adalah kemahiran yang sangat penting.

Dalam CSS, terdapat berbilang sifat yang boleh mengawal cara teks dibalut. Antaranya, yang paling biasa ialah atribut white-space, yang mengawal sama ada elemen itu mengekalkan ruang dan baris baharu serta cara mengendalikan ruang dan baris baharu dalam teks.

Atribut ruang putih mempunyai tiga nilai berikut:

1. normal: nilai lalai. Peraturan pemisah baris standard digunakan, dan ruang dan pemisah baris berturut-turut dimampatkan kepada satu ruang atau pemisah baris, melainkan CSS atau HTML digunakan untuk memecahkan baris dalam teks.
2. pre: Ruang dan pemisah baris dalam teks akan dikekalkan dan teks akan dipaparkan seperti sedia ada.
3. nowrap: Teks tidak akan dibalut apabila menemui ruang atau aksara baris baharu, tetapi akan terus dipaparkan pada baris yang sama.

Di bawah ini kami akan melaksanakan tiga contoh tanpa pemisah baris untuk menunjukkan cara menggunakan atribut white-space dalam CSS untuk mencapai gaya pemisah bukan baris.

Contoh 1: Paksa teks untuk dipaparkan pada baris yang sama

Dalam contoh ini, kami akan menunjukkan cara untuk membuat paparan teks pada satu baris tanpa pembalut baris. Kami akan menggunakan nilai white-space atribut nowrap untuk mencapai ini. Kaedah pelaksanaan khusus adalah seperti berikut:

.nowrap {
  white-space: nowrap;
}

Gaya ini akan memaksa kandungan teks semua elemen untuk dipaparkan pada baris yang sama dan tidak akan membalut apabila menemui ruang atau aksara baris baharu. Mari kita lihat contoh:

<div class="nowrap">
  这是一个很长的文本，我们在这里使它不进行换行处理。
</div>

Teks di sini tidak akan dibalut apabila menemui ruang atau aksara baris baharu, tetapi akan sentiasa dipaparkan pada baris yang sama.

Contoh 2: Sembunyikan teks di luar bekas

Dalam contoh ini, kami akan menunjukkan cara untuk menyembunyikan teks di luar bekas apabila ia mencapai had lebar. Kami akan menggunakan atribut overflow dan atribut text-overflow untuk mencapai ini. Kaedah pelaksanaan khusus adalah seperti berikut:

.overflow {
  width: 300px; /* 给容器指定宽度，超出部分进行隐藏 */
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 超出部分进行隐藏 */
  text-overflow: ellipsis; /* 超出部分使用“...”进行省略 */
}

Gaya ini akan mengehadkan lebar elemen, menyembunyikan bahagian yang berlebihan dan menggunakan "..." untuk menghilangkannya. Mari kita lihat contoh:

<div class="overflow">
  这是一个很长的文本，我们将它放在容器中限制宽度，并使超出部分进行隐藏，使用“...”进行省略。
</div>

Teks di sini akan ditinggalkan di luar bekas dan digantikan dengan "...".

Contoh 3: Perkataan tidak dibelah

Dalam contoh ini, kami akan menunjukkan cara untuk mengelakkan perkataan terbelah dalam baris yang berbeza. Kami akan menggunakan nilai white-space atribut pre untuk mencapai ini. Kaedah pelaksanaan khusus adalah seperti berikut:

.no-split {
  white-space: pre;
}

Gaya ini akan mengekalkan format asal perkataan dalam teks, iaitu, mengekalkan perkataan daripada dipisahkan kepada baris yang berbeza. Mari lihat contoh di bawah:

<div class="no-split">
  这是一个带有多个空格的文本，我们将使单词不被分割在不同的行中。
</div>

Ruang di sini akan dikekalkan mengikut format dalam teks, dan perkataan tidak akan dipecahkan kepada baris yang berbeza.

Ringkasnya, contoh di atas menunjukkan cara menggunakan gaya CSS untuk mengawal pembalut teks. Apabila mereka bentuk halaman web, menggunakan atribut ini dengan tepat boleh meningkatkan estetika dan pengalaman pengguna halaman web.

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