Bagaimanakah saya boleh menghalang perkataan panjang daripada memecahkan div saya?-tutorial css-php.cn

Bagaimanakah saya boleh menghalang perkataan panjang daripada memecahkan div saya?

WBOY

Lepaskan： 2023-08-30 16:29:06

ke hadapan

773 orang telah melayarinya

Bagaimanakah saya boleh menghalang perkataan panjang daripada memecahkan div saya?

Kadangkala, pembangun perlu memaparkan perkataan yang panjang di halaman web. Contohnya, URL paparan, nama fail panjang, dsb. Kadangkala panjang perkataan lebih besar daripada panjang bekas induk dan perkataan itu memusnahkan bekas.

Sebagai contoh, kami mencipta kad untuk menunjukkan butiran fail dan nama failnya sangat panjang, yang mungkin memecahkan kad dan ia sentiasa kelihatan lebih teruk. Oleh itu, pembangun perlu menghalang perkataan panjang daripada memecahkan elemen div dengan membungkusnya.

Sebelum memulakan penyelesaian, marilah kita memahami masalah melalui contoh.

Contoh 1 (div penguraian perkataan panjang)

Dalam contoh di bawah, kami telah mencipta elemen div dan menambahkan elemen "p" di dalam elemen div. Selain itu, kami menambah perkataan panjang pada teks unsur "p".

Dalam CSS, kami menetapkan saiz tetap elemen div. Dalam output, pengguna boleh memerhati apabila perkataan itu memecahkan elemen div dan melimpah daripadanya.

<html>
<head>
   <style>
      .container {
         width: 300px;
         border: 1px solid #ccc;
         padding: 10px;
         font-size: 1.5rem;
      }       
   </style>    
</head>
<body>
   <h2> Long words breaking the div in HTML5 </h2>
   <div class = "container">
      <p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv. </p>
   </div>
</body>
</html>

Salin selepas log masuk

Gunakan sifat CSS Word-break untuk memecahkan perkataan

Dalam kaedah ini, kami akan menggunakan sifat CSS "patah perkataan" untuk menghalang perkataan daripada memecahkan elemen div. Atribut "word-break" membolehkan kami memutuskan cara perkataan harus dipecahkan apabila ia melebihi lebar bekas.

Memerlukan nilai yang berbeza untuk memecahkan perkataan. Nilai "biasa" memecahkan perkataan hanya pada titik putus yang ditentukan (cth. ruang, sempang, dsb.). Nilai "pecah-semua" memecahkan perkataan pada mana-mana aksara yang melimpah, dan nilai "simpan-semua" tidak pernah memecahkan perkataan itu. perkataan.

Di sini kita akan menggunakan nilai "break-all" untuk memisahkan perkataan daripada mana-mana aksara.

Tatabahasa

Pengguna boleh menggunakan sifat CSS "patah perkataan" mengikut sintaks berikut untuk menghalang perkataan panjang daripada memecahkan elemen div.

 word-break: break-all;

Salin selepas log masuk

Contoh 2 (halang perkataan yang panjang daripada melanggar div)

Dalam contoh di bawah, kami telah menambah perkataan panjang yang kami tambah dalam contoh pertama di dalam elemen div bekas. Dalam CSS, kami menggunakan sifat "word-break" dan nilai "break-all" untuk menghalang perkataan daripada memecahkan elemen div.

Dalam output, kita dapat melihat bahawa perkataan terputus daripada aksara tertentu dan aksara yang tinggal bagi perkataan itu dipaparkan dalam baris seterusnya.

<html>
<head>
   <style>
      .container {
         width: 300px;
         border: 1px solid #ccc;
         padding: 10px;
         font-size: 1.5rem;
      }
      .long-word {
         word-break: break-all;
      }
   </style>
</head>
<body>
   <h2> Preventing the long words breaking the div in HTML5
   </h2>
   <div class = "container">
      <p class = "long-word"> This is a longwordthatshouldnotbreakinsideadiv.</p>
   </div>
</body>
</html>

Salin selepas log masuk

Gunakan atribut limpahan-balut

Atribut "overflow-wrap" membolehkan kami menentukan cara kandungan elemen harus dibalut apabila ia melimpah daripada elemen induk. Kita boleh menggunakan nilai "break-word" atribut "overflow-wrap" untuk menghalang perkataan panjang daripada memecahkan elemen div dengan membalut.

Tatabahasa

Pengguna boleh menggunakan sifat CSS “overflow-wrap” untuk membungkus perkataan panjang mengikut sintaks berikut.

overflow-wrap: break-word;

Salin selepas log masuk

Contoh 3

Dalam contoh di bawah, kami telah menambah perkataan yang sangat panjang sebagai teks unsur "p". Selepas itu, kami menggunakan atribut "overflow-wrap" bagi elemen induk untuk membungkus kandungan yang melimpah dalam baris seterusnya dengan memecahkan perkataan.

Dalam output, kita dapat melihat bahawa perkataan dipecahkan di tengah dan aksara yang tinggal dipaparkan pada baris seterusnya.

<html>
<head>
   <style>
      .container {
         width: 300px;
         border: 1px solid #ccc;
         padding: 10px;
         overflow-wrap: break-word;
      }
   </style>
</head>
<body>
   <h3> Preventing the long words breaking the div in HTML5 using the overflow-wrap property
   </h3>
   <div class = "container">
      <p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p>
   </div>
</body>
</html>

Salin selepas log masuk

Contoh 4 (Tetapkan atribut limpahan-balut menggunakan JavaScript)

Kadangkala, kita perlu menggunakan JavaScript untuk mengelakkan perkataan yang panjang daripada memecahkan div. Sebagai contoh, kami mendapat data produk daripada pangkalan data, jika nama produk sangat panjang, kami boleh menggunakan atribut "overflow-wrap" untuk produk tertentu untuk membalut nama produk yang panjang.

Dalam JavaScript kita boleh mengakses elemen HTML dan menggunakan sifat "overflowWrap" objek gaya untuk menghalang perkataan panjang daripada memecahkan elemen div.

<html>
<head>
   <style>
      .container {
         width: 300px;
         border: 1px solid #ccc;
         padding: 10px;

      }
   </style>
</head>
<body>
   <h3> Preventing the long words breaking the div in HTML5 using the <i>overflow-wrap</i> property
   </h2>
   <div class = "container">
      <p class = "long-word"> Thisisaverylongwordthatshouldnotbreakinsideadiv. </p>
   </div>
   <script>
      let longWord = document.querySelector('.long-word');
      longWord.style.overflowWrap = 'break-word';
   </script>
</body>
</html>

Salin selepas log masuk

Pengguna belajar menggunakan sifat CSS yang berbeza untuk menghalang perkataan yang panjang daripada memecahkan elemen div. Dalam kaedah pertama kami menggunakan sifat CSS "word-break" untuk menentukan cara penyemak imbas harus memecahkan perkataan. Dalam pendekatan kedua, kami menggunakan sifat CSS "overflow-wrap" untuk menentukan cara mengendalikan limpahan kandungan elemen div.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menghalang perkataan panjang daripada memecahkan div saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!