Rumah > Artikel > hujung hadapan web > Bagaimanakah saya boleh mengutamakan lokasi pemisah baris tertentu dalam HTML tanpa menggunakan atau ruang tidak putus?

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

Susan Sarandonasal: 2024-10-27 04:06:29365semak imbas

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>

Balut teks untuk disimpan bersama dalam kelas ini:

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

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>

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!

css html define for break using class this location

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Mencipta Mixin Pemegang Tempat dalam SCSS/CSS yang Berfungsi Dengan Titik Bertitik dan Titik Bertitik?Artikel seterusnya：Bagaimana untuk Mencipta Mixin Pemegang Tempat dalam SCSS/CSS yang Berfungsi Dengan Titik Bertitik dan Titik Bertitik?

Artikel berkaitan

Lihat lagi