Apabila garis tidak pecah

Garis biasanya pecah apabila teks mencapai kelebihan bekas induk. Ini adalah tingkah laku perenggan standard. Walau bagaimanapun, ini bergantung kepada ruang atau ruang putih antara kata -kata. CSS menawarkan beberapa sifat yang mempengaruhi rehat garis, tetapi mari kita fokus pada senario di mana rehat yang dijangkakan gagal.

Apa yang berlaku apabila penyemak imbas tidak mempunyai petunjuk pemecahan yang jelas?

Mari buat contoh "senarai tag" dan kemudian selesaikan masalah pemecahan garis. Inilah HTML awal:

• Php
• JavaScript
• Karat

Kami akan mengatur item senarai secara mendatar menggunakan CSS:

 ul {
  Margin: 0;
  Padding: 0;
  Senarai gaya: Tiada;
}

li {
  paparan: sebaris;
  Padding-Right: 5px;
}

Senarai itu muncul seperti yang dikehendaki. Sekarang, mari kita bungkus senarai di div dengan lebar tetap:

<div class="tags">
  <ul>
    <li>Php</li>
    <li>JavaScript</li>
    <li>Karat</li>
  </ul>
</div>

.tags {
  Lebar: 200px;
}

Inilah masalahnya: Minifikasi HTML menghilangkan ruang kosong, mengakibatkan:

<div><ul>
<li> Php</li>
<li> JavaScript</li>
<li> Karat</li>
</ul></div>

Barisan tidak lagi pecah pada 200px. Kenapa? Penyemak imbas merawat keseluruhan senarai sebagai satu perkataan yang tidak terputus kerana ketiadaan memisahkan aksara. Padding tidak menyelesaikannya; Keseluruhan senarai kekal sebagai entiti tunggal.

Memaksa garis rehat dengan watak khas

Selain ruang (tidak termasuk ruang yang tidak pecah), beberapa aksara mencetuskan garis rehat:

• Hyphens (-)
• En dashes ( -)
• Em Dashes ( -)
• Tanda Soalan (?)
• Ruang lebar sifar (u 200b atau)

Cuti ini berlaku semasa rendering; Penyemak imbas masih melihat teks sebagai satu unit. Menambah item senarai dengan salah satu watak ini memaksa rehat. Mari tambahkan "Objektif-C":

<div>
  <ul>
    <li>Php</li>
    <li>JavaScript</li>
    <li>Karat</li>
    <li>Objektif-C</li>
  </ul>
</div>

Berikut adalah tiga penyelesaian:

Penyelesaian 1: Menggabungkan watak pemecah garis

Secara manual menambah ruang atau watak pemecah baris secara manual. Walau bagaimanapun, minifiers mungkin membuangnya.

<div>
  <ul>
    <li>Php</li>
    <li>JavaScript</li>
    <li>Karat</li>
    <li>Objektif-C</li>
  </ul>
</div>

Penyelesaian 2: Menggunakan unsur-unsur pseudo

Tambah aksara pemecahan garis menggunakan CSS ::before dan ::after unsur-unsur pseudo. Minifiers tidak akan mengeluarkan ruang putih CSS ini. Perhatikan bahawa runtuh ruang putih boleh menjejaskan pendekatan ini. Menggunakan white-space: pre; mungkin perlu.

Penyelesaian 3: Menggunakan inline-block

Menggunakan display: inline-block; Pada senarai item senarai pecah, sama dengan ruang sifar lebar, tetapi tanpa pemisahan visual.

Penyelesaian 4: Leverage Flexbox

Menggunakan display: flex; atau display: inline-flex; pada<ul></ul> membolehkan pembalut garis fleksibel.

Walaupun isu ini kurang biasa, sedar dan penyelesaiannya adalah berharga, terutamanya apabila menggunakan minifiers atau membina proses yang mengubah suai ruang putih. Banyak alat moden mengurangkan masalah ini, tetapi memahami sebab yang mendasari masih penting.

Atas ialah kandungan terperinci Apabila garis tidak pecah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!