css yang melumpuhkan pemisah baris

CSS yang melarang pemisah baris

Dalam reka bentuk web, kita sering menghadapi situasi di mana pemutusan baris perlu dilarang. Contohnya, anda perlu memasukkan pautan panjang atau URL imej ke dalam sekeping teks Jika pautan ini menjangkau dua atau lebih baris, ia akan memusnahkan estetika halaman dan menjejaskan pengalaman membaca pengguna. Pada ketika ini, kita perlu menggunakan CSS untuk melumpuhkan pemisah baris.

Terdapat dua sifat dalam CSS yang boleh digunakan untuk melarang pemisah baris, iaitu "white-space" dan "word-break".

1. atribut ruang putih

Atribut ruang putih digunakan untuk mengawal ruang dan pemisah baris dalam elemen gaya Ia mempunyai nilai berikut:

• biasa: Nilai lalai, menunjukkan ruang dan pemisah baris dalam keadaan biasa
• nowrap: melarang pemisah baris, tetapi membenarkan ruang
• pra: mengekalkan ruang dan pemisah baris, tetapi tidak membalut secara automatik garisan
• pra-balut: kekalkan ruang dan pemisah baris, balut garisan secara automatik ke kedudukan yang sesuai
• pra-baris: larang pemisah baris, tetapi benarkan ruang, balut garisan secara automatik pada kedudukan yang sesuai

Kita boleh menggunakan atribut nowrap untuk melumpuhkan pemisah baris dalam elemen. Sebagai contoh, teks dalam contoh berikut akan dipaksa untuk dipaparkan pada satu baris:

<p style="white-space:nowrap;">This is a sample text that will not be wrapped.</p>

2. atribut patah perkataan

Atribut patah perkataan digunakan untuk kaedah pembungkusan perkataan kawalan, ia mempunyai nilai berikut:

• biasa: Nilai lalai, cuba ikut perkataan apabila memutuskan baris
• pecah-semua: Apabila perkataan terlalu panjang, paksa baris baharu
• keep-all: Jika rentetan mengandungi aksara Asia Timur tertentu (seperti Cina, Jepun, Korea, dll.), perkataan

tidak akan dipecahkan. Kita boleh menggunakan atribut putus-semua untuk melarang pembungkusan baris perkataan dalam elemen. Sebagai contoh, pautan URL yang panjang dalam contoh berikut akan dipaksa untuk membalut:

<p style="word-break:break-all;">https://www.example.com/es?hl=zhcn&tab=rw</p>

Perlu diingat bahawa jika kedua-dua atribut ruang putih dan pemecah kata digunakan dalam elemen, keutamaannya adalah Berbeza . Khususnya, atribut pemecah perkataan diutamakan daripada atribut ruang putih. Iaitu, jika anda ingin memaksa pemisah baris dan mengekalkan semua ruang, anda harus menggunakan pemecahan perkataan: pemecah-semua-putih-ruang: pra-bungkus;, tetapi bukan ruang putih: pemecahan perkataan; -semua;.

Selain itu, dalam penggunaan sebenar, kami boleh menambah gaya CSS ini pada fail CSS dan memanggilnya untuk mencapai tujuan mencantikkan halaman web.

Di atas ialah pengenalan kepada teknik CSS untuk melumpuhkan pemisah baris, saya harap ia akan membantu anda.

Atas ialah kandungan terperinci css yang melumpuhkan pemisah baris. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!