Bagaimanakah saya boleh mengutamakan lokasi pemisah baris tertentu dalam HTML tanpa menggunakan <wbr> atau ruang tidak putus?-tutorial css-php.cn

Bagaimanakah saya boleh mengutamakan lokasi pemisah baris tertentu dalam HTML tanpa menggunakan atau ruang tidak putus?

Susan Sarandon

Lepaskan： 2024-10-27 04:06:29

asal

388 orang telah melayarinya

How can I prioritize specific line break locations in HTML without using <wbr> atau ruang yang tidak pecah? atau ruang yang tidak pecah? " />

Menentukan Lokasi Pemisah Talian Pilihan

Dalam HTML, pemisah baris biasanya berlaku pada ruang atau koma. Walau bagaimanapun, dalam situasi di mana anda ingin memaksa pemisah baris di lokasi tertentu, terdapat teknik untuk mengutamakan rehat pilihan.

Untuk menetapkan lokasi putus baris pilihan tanpa menggunakan ruang tanpa putus, anda boleh menggunakan pendekatan berikut:

Tentukan kelas CSS:

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

Salin selepas log masuk

Balut teks untuk disimpan bersama dalam kelas ini:

<code class="html"><span class="avoidwrap">Text to keep together</span></code>

Salin selepas log masuk

Ini kaedah menetapkan teks yang dibalut sebagai blok sebaris, menghalangnya daripada pecah dalam sempadannya sendiri Algoritma pembalut baris akan mula-mula cuba memecahkan di lokasi pilihan yang ditentukan (cth., koma) sebelum mempertimbangkan ruang dalam blok sebaris.

Contohnya, coretan kod berikut:

<code class="html"><html>
  <head>
    <style type="text/css">
      span.avoidwrap {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <table>
        <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
        </tr>
        <tr>
          <td>lorem ipsum</td>
          <td>
            <span class="avoidwrap">Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies</span>
            <br />
            <span class="avoidwrap">Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K</span>
            <br />
            <span class="avoidwrap">Froot Loops, Apple Jacks</span>
          </td>
          <td>lorem ipsum</td>
        </tr>
      </table>
    </div>
  </body>
</html></code>

Salin selepas log masuk

Akan mengakibatkan pemisah baris dibuat di lokasi koma yang ditetapkan, mengekalkan teks dalam setiap blok sebaris bersama-sama.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengutamakan lokasi pemisah baris tertentu dalam HTML tanpa menggunakan atau ruang tidak putus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!