Rumah > Artikel > hujung hadapan web > Bagaimana untuk menghalang perkataan dalam jadual HTML daripada pecah menjadi baris?
Bagaimana untuk menghalang perkataan dalam jadual HTML daripada pecah menjadi baris?
- WBOYke hadapan
- 2023-09-16 22:45:03510semak imbas
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;
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.
| Secara lalai, elemen biasa dan sejajar kiri diletakkan di bawah | .
Elakkan perkataan dalam jadual HTML daripada dibahagikan kepada baris yang berbezaUntuk lebih memahami cara menghalang pemecahan perkataan dalam jadual HTML, mari lihat contoh berikut. ContohDalam 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>
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. ContohMari 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>
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!