Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Membuat Balutan Kandungan Sel Jadual dalam HTML?

Bagaimana untuk Membuat Balutan Kandungan Sel Jadual dalam HTML?

DDDasal: 2024-10-27 08:57:03633semak imbas

How to Make Table Cell Content Wrap in HTML?

Cara Memaksa Sel Jadual Kandungan untuk Dibungkus

Dalam kod yang disediakan, teks dalam elemen meregangkan apabila diserahkan. Untuk menyelesaikan isu ini dan memastikan teks dibungkus dalam sel, langkah berikut boleh diambil:

Penyelesaian

Reka Letak Jadual:
Tambah jadual -susun atur:ditetapkan pada unsur. Atribut ini menentukan bahawa jadual akan mempunyai reka letak tetap, memaksa lajurnya mempunyai lebar yang ditentukan.
Word Wrap:
Tambah word-wrap:break-word pada < ;td> elemen. Sifat ini mendayakan pembungkusan perkataan dalam sel jadual, membolehkan teks panjang dipecahkan kepada berbilang baris.

Contoh

<html><br><head> <br> <style><br> jadual {border-collapse:collapse; susun atur jadual:tetap; width:310px;}<br> jadual td {border:solid 1px #fab; lebar: 100px; word-wrap:break-word;}<br> </style><br></head></p>
<p><body><br> <table></p>
<pre class="brush:php;toolbar:false">  <tr>
     <td>1</td>
     <td>Lorem Ipsum</td>
     <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
  </tr>
  <tr>
     <td>2</td>
     <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
     <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
  </tr>
  <tr>
     <td>3</td>
     <td></td>
     <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
  </tr>

DEMO:

jadual {border-collapse:collapse; susun atur jadual:tetap; width:310px;}</p>
<pre class="brush:php;toolbar:false">   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

       <meja></p>
<pre class="brush:php;toolbar:false">      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>

”

Atas ialah kandungan terperinci Bagaimana untuk Membuat Balutan Kandungan Sel Jadual dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html break class Attribute Property JS this border table td issue word

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：Bagaimanakah saya boleh membahagikan kalangan kepada saiz yang sama atau berbeza-beza menggunakan CSS tanpa JavaScript?Artikel seterusnya：Bagaimanakah saya boleh membahagikan kalangan kepada saiz yang sama atau berbeza-beza menggunakan CSS tanpa JavaScript?

Artikel berkaitan

Lihat lagi