Table of Contents
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
In the provided code, the text in the
Solution
-
Table Layout:
Add table-layout:fixed to theelement. 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 theelements. 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 - Word Wrap: