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

Bagaimana untuk Membuat Balutan Kandungan Sel Jadual dalam HTML?

DDD
DDDasal
2024-10-27 08:57:03518semak 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

  1. 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.
  2. 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!

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