Apakah kod css tanpa pemisah baris?

Kod pembalut bukan talian CSS

Dalam reka bentuk web, pembalut teks merupakan isu yang sangat penting. Dengan peningkatan skrin yang berterusan dan penambahbaikan resolusi, terdapat lebih banyak teks dalam halaman web Cara membuat teks adaptif dan membalut secara automatik dalam saiz skrin yang berbeza telah menjadi salah satu isu yang perlu dipertimbangkan oleh pereka web.

Dalam artikel ini, kami akan membincangkan beberapa cara untuk menghalang teks daripada dibalut dalam CSS untuk membantu anda memahami dengan lebih baik cara menangani pembalut teks.

1. Atribut ruang putih

Atribut ruang putih dalam CSS mengawal paparan ruang, pemisah baris dan aksara lain dalam teks. Khususnya, atribut ini mempunyai nilai berikut:

1. normal: nilai lalai. Balut secara automatik, tidak kira sama ada sempadan dicapai atau tidak, berbilang ruang akan digabungkan menjadi satu ruang.
2. nowrap: Tiada pembalut baris, teks dikecilkan secara automatik agar sesuai dengan saiz bekas.
3. pra: Kekalkan ruang dan pemisah baris, jangan gabungkan berbilang ruang dan jangan balut garisan secara automatik.
4. pra-balut: Balut garisan secara automatik tetapi kekalkan ruang dan pemisah baris.
5. pra-baris: Gabungkan berbilang ruang secara automatik dan balut garisan secara automatik.

Menggunakan atribut ruang putih boleh mengawal pembalut baris teks dengan mudah. ​​Hanya pilih nilai yang berbeza mengikut keperluan sebenar.

2. Atribut patah perkataan

Atribut patah perkataan digunakan untuk mengawal pembalut teks dalam baris, tetapi ia berbeza daripada atribut ruang putih kerana ia membalut baris dalam perkataan.

Atribut ini mempunyai nilai berikut:

1. normal: nilai lalai. Teks dibalut secara automatik, tetapi tidak dalam perkataan.
2. pecah-semua: Teks boleh dipecahkan di mana-mana sahaja (termasuk perkataan dalam).
3. keep-all: Jangan benarkan pemisah baris dalam perkataan melainkan perkataan itu melebihi lebar bekas.

Perlu diperhatikan bahawa, tidak seperti atribut ruang putih, atribut pemecahan perkataan hanya berfungsi pada pemisah baris dalam perkataan.

3. Atribut limpahan-balut

Atribut limpahan-balut digunakan untuk menentukan cara mengendalikan perkataan apabila ia tidak dapat dimuatkan sepenuhnya ke dalam bekasnya. Seperti atribut patah perkataan, atribut ini hanya mempengaruhi pemisah baris dalam perkataan.

Atribut ini mempunyai dua nilai berikut:

1. normal: nilai lalai. Pembalut garisan mengikut peraturan biasa.
2. kata putus: Apabila perkataan tidak muat sepenuhnya ke dalam bekasnya, ia boleh pecah di tengah dan meneruskan pada baris seterusnya.

4. Atribut text-overflow

Atribut text-overflow digunakan untuk menentukan kaedah pemprosesan apabila teks melimpahi sempadan bekas. Sifat ini hanya berfungsi apabila sifat limpahan ditetapkan kepada tersembunyi atau tatal dan hanya berfungsi pada lebar elemen peringkat blok.

Atribut ini mempunyai tiga nilai berikut:

1. klip: nilai lalai. Potong kandungan berlebihan secara langsung.
2. elipsis: Tambahkan elipsis pada penghujung teks apabila ia melimpahi sempadan bekas.
3. rentetan: Sesuaikan gaya apabila teks paparan melimpahi sempadan bekas, seperti menggunakan "..." dsb.

Ringkasan

Melalui perbincangan di atas, kita boleh membuat kesimpulan berikut:

1. Gunakan atribut ruang putih untuk mengawal pembalut baris teks . Dan pilih nilai yang berbeza mengikut keperluan sebenar.
2. Sifat pemecah kata dan limpahan-balut hanya berfungsi pada pemecahan baris dalam perkataan.
3. Gunakan atribut limpahan teks untuk mengawal cara teks melimpah sempadan kontena.

Dalam reka bentuk web sebenar, masalah pembalut baris teks adalah isu yang kompleks dan penting, dan perlu memilih kaedah yang sesuai untuk menyelesaikannya mengikut situasi tertentu. Dalam situasi yang berbeza, atribut yang berbeza akan mempunyai kesan yang berbeza, dan anda perlu memilih mengikut keperluan tertentu. Saya harap pengenalan dalam artikel ini dapat membantu anda menguasai kaedah teks tidak membungkus dalam CSS dengan lebih baik.

Atas ialah kandungan terperinci Apakah kod css tanpa pemisah baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!