Bagaimana untuk Menandakan Titik Pecah Pilihan untuk Pembalut Garisan dalam HTML Tanpa Menggunakan Ruang Tidak Putus?

Menandakan Titik Pecah Pilihan untuk Pembalut Baris

Dalam HTML, pemisah baris biasanya berlaku pada ruang atau sempang. Walau bagaimanapun, dalam kes tertentu, pembangun mungkin ingin menentukan titik putus pilihan untuk baris, walaupun tiada ruang atau sempang di lokasi tertentu itu.

Pertimbangkan situasi berikut: Sel jadual mengandungi senarai panjang nama bijirin yang perlu dibalut secara keutamaan selepas koma. Walau bagaimanapun, menggunakan ruang yang tidak pecah untuk mengelakkan patah yang tidak diingini boleh mengakibatkan pelebaran lajur yang tidak diingini.

Penyelesaian yang Dicadangkan:

Daripada menggunakan ruang yang tidak pecah, kami boleh menggunakan elemen blok sebaris untuk mencapai hasil yang diinginkan. Dengan membalut mata putus pilihan dalam elemen dengan kelas CSS "avoidwrap," kita boleh menghalang pemisah baris daripada berlaku di dalam blok tersebut.

Contoh:

<code class="html"><span class="avoidwrap">Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks</span></code>

<code class="css">span.avoidwrap {
  display: inline-block;
}</code>

Pendekatan ini membenarkan garisan untuk diputuskan mengikut keutamaan selepas koma dalam elemen. Walau bagaimanapun, jika garisan perlu dibalut lebih jauh, ia akan pecah selepas ruang dalam serpihan yang lebih kecil.

Nota:

Balut teks CSS3: elakkan tingkah laku menyediakan fungsi yang serupa. Walau bagaimanapun, adalah penting untuk menyemak sokongan penyemak imbas sebelum menggunakannya dalam persekitaran pengeluaran.

Atas ialah kandungan terperinci Bagaimana untuk Menandakan Titik Pecah Pilihan untuk Pembalut Garisan dalam HTML Tanpa Menggunakan Ruang Tidak Putus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!