Bagaimana untuk Mengawal Pemisahan Garis dalam Jadual HTML Apabila Anda Memerlukannya Berlaku pada Titik Tertentu?

Preferred Line Breaks dalam HTML

Mencipta kandungan web selalunya melibatkan paparan teks dalam jadual, di mana pemisah baris diperlukan untuk mengelakkan kandungan daripada melimpah. Walau bagaimanapun, mungkin terdapat keutamaan untuk pemisah baris berlaku pada titik tertentu.

Menentukan Titik Pecah Pilihan

Dalam contoh yang disediakan, sel jadual mengandungi senarai bijirin dipisahkan dengan koma. Tingkah laku yang diingini ialah pemisah baris berlaku selepas koma, sebelum ruang. Walau bagaimanapun, HTML tidak menyediakan cara asli untuk menentukan titik putus pilihan.

Mengelakkan Ruang Tidak Pecah

Memasukkan ruang tidak putus boleh memaksa pemisah baris berlaku pada titik tertentu, tetapi ia juga meningkatkan lebar teks tanpa syarat. Untuk mengelakkan ini, pendekatan alternatif diperlukan.

Harta Balutan Teks

CSS3 memperkenalkan sifat bungkus teks, yang membenarkan kawalan ke atas pemisah baris dalam teks. Walau bagaimanapun, percubaan untuk menggunakan pembalut teks: elakkan daripada terbukti tidak berjaya dalam contoh.

Paparan Blok Sebaris

Sebaliknya, paparan: sifat blok sebaris boleh digunakan dalam berganding dengan unsur pembalut. Ini secara berkesan mewujudkan "blok" teks dalam sel yang boleh membalut secara bebas daripada teks di sekelilingnya.

Contoh

Untuk melaksanakan gelagat yang diingini, CSS dan HTML boleh digunakan:

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

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

Kesan

Dengan menggunakan kelas avoidwrap, nama bijirin disimpan bersama dan pemisah baris berlaku pada koma, seperti yang dikehendaki. Jika garisan itu perlu dibalut lagi, nama bijirin kemudiannya akan terputus di ruang.

Atas ialah kandungan terperinci Bagaimana untuk Mengawal Pemisahan Garis dalam Jadual HTML Apabila Anda Memerlukannya Berlaku pada Titik Tertentu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!