Bagaimana untuk Membuat Balutan Kandungan Sel Jadual dalam HTML?-tutorial css-php.cn

Bagaimana untuk Membuat Balutan Kandungan Sel Jadual dalam HTML?

DDD

Lepaskan： 2024-10-27 08:57:03

asal

517 orang telah melayarinya

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>

Salin selepas log masuk

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

<meja></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><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!