Bagaimana untuk menghalang perkataan dalam jadual HTML daripada pecah menjadi baris?-html tutorial-php.cn

Bagaimana untuk menghalang perkataan dalam jadual HTML daripada pecah menjadi baris?

Apabila anda perlu memutuskan baris, anda boleh menggunakan sifat pecah perkataan dalam CSS untuk menukar pemisah baris. Pemisahan baris teks biasanya muncul hanya dalam kedudukan tertentu, seperti selepas ruang atau sempang. Berikut ialah sintaks untuk sempang

word-break: normal|break-all|keep-all|break-word|initial|inherit;

Salin selepas log masuk

Mari baca artikel ini secara mendalam untuk lebih memahami cara mencegah pemecahan perkataan dalam jadual HTML. Sebelum itu, mari kita lihat jadual HTML.

Jadual HTML

Pereka web boleh menggunakan jadual HTML untuk menyusun maklumat seperti teks, imej, pautan dan jadual lain ke dalam baris dan lajur sel.

teg digunakan untuk menjana jadual HTML. Baris jadual dibuat menggunakan teg manakala sel data dibuat menggunakan teg

Secara lalai, elemen biasa dan sejajar kiri diletakkan di bawah

Elakkan perkataan dalam jadual HTML daripada dibahagikan kepada baris yang berbeza

Untuk lebih memahami cara menghalang pemecahan perkataan dalam jadual HTML, mari lihat contoh berikut.

Contoh

Dalam contoh di bawah, kami menggunakan patah perkataan: simpan-semua untuk mengelakkan perkataan daripada pecah menjadi baris yang berbeza.

<!DOCTYPE html>
<html>
   <body>
   <style>
      table {
         width:100px;
         border:1px solid black;
      }
      th, td {
         word-break:keep-all;
         border:1px solid black;
      }
   </style>
   <table cellspacing="0">
      <thead>
      <tr>
         <th style="display:none">ID</th>
         <th>SNO.</th>
         <th>Vehicle</th>
      </tr>
      </thead>
      <tbody>
         <tr>
            <td>1</td>
            <td>Verna</td>
            <td>Break Failure, BreakPads Problem</td>
         </tr>
      </tbody>
   </table>
   </body>
</html>

Salin selepas log masuk

Apabila anda menjalankan skrip, ia akan menjana output yang merangkumi jadual yang diisi dengan data dan menggunakan "patah kata: simpan-semua" untuk mengelakkan tanda sempang daripada dipaparkan pada halaman web.

Contoh

Mari kita lihat contoh di bawah di mana kita mencipta halaman web ringkas menggunakan atribut ruang putih dengan nilai "tiada pemisah baris".

<!DOCTYPE html>
<html>
   <body style="background-color:#EAFAF1">
      <style>
         table.violetTable td,
         table.violetTable th {
            white-space: nowrap;
            border: 2px solid #5B2C6F ;
            padding: 4px 3px;
            text-align: left;
         }
      </style>
      <table class="violetTable">
         <tr>
         <td>Welcome to TutorialsPoint</td>
         </tr>
      </table>
   </body>
</html>

Salin selepas log masuk

Apabila anda menjalankan skrip di atas, tetingkap output akan muncul menunjukkan teks daripada data jadual; ia akan menjadi lebih besar apabila teks dalam kod menjadi lebih panjang, tetapi ia tidak akan memecahkan perkataan.

Atas ialah kandungan terperinci Bagaimana untuk menghalang perkataan dalam jadual HTML daripada pecah menjadi baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

防止 html表格 cabang perkataan

sumber：tutorialspoint.com

Artikel sebelumnya：Bagaimanakah kita boleh menetapkan bilangan baris yang boleh dilihat bagi kawasan teks dalam HTML? Artikel seterusnya：Bagaimana untuk menggunakan fungsi pada dua nilai tatasusunan secara serentak dari kanan ke kiri?

Kenyataan Laman Web ini

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 terbaru oleh pengarang