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

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

   <br><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><p></p><br>   

     <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:

   
   

   
   

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

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

   ”

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!