How to wrap table cell <td> content using CSS ? - GeeksforGeeks

24 Sep, 2021
Tables in HTML are absurd elements. It is not an easy task to apply CSS properties to a table element. Being a highly structured element, CSS properties are sometimes lost in the hierarchy down the structure. It is also very likely that the contents of the table might change the structure or dimensions of the table. For example, long words residing in the table cells can cause the cell width to increases. If you fix that problem, it might happen that the long words cross the cell boundaries. We can avoid this by performing word wrap on the cell data.
There are two methods to wrap table cell <td> content using CSS which are given below: 
Using word-wrap property: This property is used to allow long words to break and wrap onto the next line.
Using word-break property: This property is used to specify how to break the word when the word reached at end of the line. The line breaks in the text can occur in certain spaces, like when there is a space or a hyphen.
Example:  
HTML
<!DOCTYPE html><html> <head>    <title>        How to wrap table cell        td content using CSS?    </title>         <style>        h1, h3 {            text-align: center;        }        table {            border-spacing: 0px;            table-layout: fixed;            margin-left:auto;            margin-right:auto;        }        th {            color: green;            border: 1px solid black;        }        td {            border: 1px solid black;        }    </style></head> <body>    <h1 style="color:green;">GeeksforGeeks</h1>         <h3>Simple Example Without Word Wrap</h3>         <table width="600">        <tr>            <th>Course Name</th>            <th>Specifications</th>            <th>Duration</th>        </tr>                 <tr>            <td>Data Structures and Algorithms</td>            <td>                It includes pre-recorded premium                <span style="color: red;">                    Videolectures&programmingquestions                </span> for practice.            </td>            <td>4 months</td>        </tr>                 <tr>            <td>GFG Placement Programme</td>            <td>                This course helps students to prepare                for the Recruitment drive.            </td>            <td>3 months</td>        </tr>    </table></body> </html>
Output: 
Note: In the above table, we have defined a table width of 600px and applied table-layout as fixed. Observe that a long word, which is marked red, is made by removing the spaces, for example purpose.
Method 1: Using word-wrap property: The word-wrap: break-word; property is used to break the long word at an appropriate break point.
Example:  
HTML
<!DOCTYPE html><html> <head>    <title>        How to wrap table cell        td content using CSS?    </title>     <style>        h1,        h3 {            text-align: center;        }         table {            border-spacing: 0px;            table-layout: fixed;            margin-left: auto;            margin-right: auto;        }         th {            color: green;            border: 1px solid black;        }         td {            border: 1px solid black;            word-wrap: break-word;        }    </style></head> <body>    <h1 style="color:green;">GeeksforGeeks</h1>     <h3>Wrap Table Cell td Content using word-wrap property</h3>     <table width="600">        <tr>            <th>Course Name</th>            <th>Specifications</th>            <th>Duration</th>        </tr>         <tr>            <td>Data Structures and Algorithms</td>            <td>                It includes pre-recorded premium                <span style="color: red;">                    Videolectures&programmingquestions                </span> for practice.            </td>            <td>4 months</td>        </tr>         <tr>            <td>GFG Placement Programme</td>            <td>                This course helps students to prepare                for the Recruitment drive.            </td>            <td>3 months</td>        </tr>    </table></body> </html>
Output: 
Method 2: Using word-break property: The word-break: break-all; property is used to break the word at any character. 
Example:  
HTML
<!DOCTYPE html><html> <head>    <title>        How to wrap table cell        td content using CSS?    </title>     <style>        h1,        h3 {            text-align: center;        }         table {            border-spacing: 0px;            table-layout: fixed;            margin-left: auto;            margin-right: auto;        }         th {            color: green;            border: 1px solid black;        }         td {            border: 1px solid black;            word-break: break-all;        }    </style></head> <body>    <h1 style="color:green;">GeeksforGeeks</h1>     <h3>Wrap Table Cell td Content using word-break property</h3>     <table width="600">        <tr>            <th>Course Name</th>            <th>Specifications</th>            <th>Duration</th>        </tr>         <tr>            <td>Data Structures and Algorithms</td>            <td>                It includes pre-recorded premium                <span style="color: red;">                    Videolectures&programmingquestions                </span> for practice.            </td>            <td>4 months</td>        </tr>         <tr>            <td>GFG Placement Programme</td>            <td>                This course helps students to prepare                for the Recruitment drive.            </td>            <td>3 months</td>        </tr>    </table></body> </html>
Output: 
Note: Please note the difference between the outcome of both the properties. The word-wrap property wraps the word on a new line while word-break property continues to follow the flow and breaks at any appropriate character.
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
sagartomar9927
CSS-Misc
HTML-Misc
Picked
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Create a Responsive Navbar using ReactJS
Design a web page using HTML and CSS
How to position a div at the bottom of its container using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
Types of CSS (Cascading Style Sheet)
How to Insert Form Data into Database using PHP ?