Apa yang perlu dilakukan jika kandungan css tidak dibungkus?

CSS ialah bahagian penting dalam reka bentuk web Ia boleh menambah pelbagai gaya pada halaman web, seperti warna, fon, reka letak, dsb. Antaranya, pembalut baris kandungan juga merupakan gaya penting dalam CSS Apabila kita perlu melaraskan susun atur teks pada halaman, pembalut baris kandungan amat penting.

Dalam CSS, penyemak imbas menggunakan sifat untuk mengawal pembalut teks secara automatik. Secara lalai, teks dibalut mengikut bekasnya, yang ditentukan oleh mekanisme pembalut perkataan penyemak imbas. Tetapi kadangkala, kami mahu teks boleh dibungkus dalam bekas Dalam kes ini, kami boleh menggunakan kaedah berikut untuk mencapainya.

1 Gunakan atribut ruang putih

Atribut ruang putih boleh mengawal cara ruang teks dan pemisah baris dipaparkan.

Atribut ruang putih mempunyai empat nilai, iaitu normal, nowrap, pra dan pra bungkus. Antaranya, normal ialah nilai lalai. nowrap bermaksud bahawa teks tidak akan membalut secara automatik apabila ia melimpahi bekas, pra bermakna bahawa pemisah baris akan dikekalkan dalam teks, tetapi teks tidak akan membalut secara automatik di tepi bekas, dan pra-bungkus bermakna jika teks mempunyai garis putus di tepi bekas, maka ia sepatutnya Garis putus.

Kod sampel adalah seperti berikut:

div {
  width: 200px;
  height: 100px;
  white-space: nowrap;
}

Kod di atas akan menghalang semua teks dalam elemen div dengan lebar 200px dan ketinggian 100px daripada dibalut secara automatik. Jika kita menukar atribut ruang putih kepada pra, maka baris baharu yang muncul dalam teks akan dikekalkan. Jika pra-bungkus, teks boleh mempunyai baris baharu di tepi bekas.

2. Gunakan atribut text-overflow

Atribut text-overflow adalah untuk menggantikan kandungan limpahan dengan aksara yang ditentukan apabila teks melimpahi bekas.

Atribut limpahan teks mempunyai tiga nilai, iaitu klip, elipsis dan rentetan. Antaranya, klip ialah nilai lalai, yang bermaksud bahawa apabila teks melimpah ke dalam bekas, teks akan disembunyikan bermakna elipsis dipaparkan pada rentetan yang melimpah bermakna aksara yang ditentukan dipaparkan pada teks dan bukannya elipsis.

Kod sampel adalah seperti berikut:

div {
  width: 200px;
  height: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Kod di atas akan menggantikan teks dalam elemen div dengan lebar 200px dan ketinggian 100px dengan elipsis apabila ia melimpah.

3. Gunakan atribut word-break

Atribut word-break boleh mengawal cara perkataan dipecahkan dan dibalut.

Atribut word-break mempunyai tiga nilai iaitu normal, break-all dan keep-all. Antaranya, normal ialah nilai lalai, yang bermaksud bahawa penyemak imbas boleh memecahkan perkataan di mana-mana sahaja;

Kod sampel adalah seperti berikut:

div {
  width: 200px;
  height: 100px;
  word-break: keep-all;  
}

Kod di atas tidak akan membungkus aksara Cina atau Jepun dalam teks dalam elemen div dengan lebar 200px dan ketinggian 100px .

Ringkasnya, untuk mencapai kandungan tidak pecah dalam CSS, kita boleh menggunakan ruang putih, limpahan teks, pemecah kata dan atribut lain untuk mencapainya. Menggunakan atribut ini boleh meningkatkan kebolehbacaan dan estetika halaman web dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Apa yang perlu dilakukan jika kandungan css tidak dibungkus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!