How to Make Table Cell Content Wrap in HTML?-CSS Tutorial-php.cn

How to Make Table Cell Content Wrap in HTML?

DDD

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

Original

517 people have browsed it

How to Make Table Cell Content Wrap in HTML?

How to Force Table Cell Content to Wrap

In the provided code, the text in the elements is stretching when submitted. To resolve this issue and ensure the text wraps within the cells, the following steps can be taken:

Solution

Table Layout:
Add table-layout:fixed to the element. This attribute specifies that the table will have a fixed layout, forcing its columns to have the specified widths.

Word Wrap:
Add word-wrap:break-word to the

elements. This property enables word wrapping within the table cells, allowing long text to break into multiple lines.

Example

<html><br><head><br>   <style><br>   table {border-collapse:collapse; table-layout:fixed; width:310px;}<br>   table td {border:solid 1px #fab; width: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>

Copy after login

DEMO:

table {border-collapse:collapse; table-layout:fixed; 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;}

Copy after login

       <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>
   </table>

Copy after login

”

The above is the detailed content of How to Make Table Cell Content Wrap in HTML?. For more information, please follow other related articles on the PHP Chinese website!