How To Wrap Table Cell Content Using CSS ? - GeeksforGeeks

The word-wrap, and word-break properties in CSS are used to wrap content within a table cell (<td>).

HTML <h3 style="text-align:center;"> Simple Example Without Word Wrap </h3> <table width="600" style="border-spacing: 0px; table-layout: fixed; margin-left:auto; margin-right:auto;"> <tr> <th style="border: 1px solid black;"> Course Name </th> <th style="border: 1px solid black;"> Specifications </th> <th style="border: 1px solid black;"> Duration </th> </tr> <tr> <td style="border: 1px solid black;"> Data Structures and Algorithms </td> <td style="border: 1px solid black;"> It includes pre-recorded premium <span style="color: red;"> Videolectures&programmingquestions </span> for practice. </td> <td style="border: 1px solid black;">4 months</td> </tr> <tr> <td style="border: 1px solid black;"> GFG Placement Programme </td> <td style="border: 1px solid black;"> This course helps students to prepare for the Recruitment drive. </td> <td style="border: 1px solid black;">3 months</td> </tr> </table>

Output

without word-wrap

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.

1. Using word-wrap property

The word-wrap: break-word; property is used to break the long word at an appropriate break point.

Syntax

word-wrap: break-word; HTML <h3 style="text-align:center;"> Wrap Table Cell td Content using word-wrap property </h3> <table width="600" style="border-spacing: 0px; table-layout: fixed; margin-left:auto; margin-right:auto;"> <tr> <th style="border: 1px solid black;">Course Name</th> <th style="border: 1px solid black;">Specifications </th> <th style="border: 1px solid black;">Duration</th> </tr> <tr> <td style="border: 1px solid black; word-wrap: break-word;">Data Structures and Algorithms</td> <td style="border: 1px solid black; word-wrap: break-word;"> It includes pre-recorded premium <span style="color: red;"> Videolectures&programmingquestions </span> for practice. </td> <td style="border: 1px solid black;">4 months</td> </tr> <tr> <td style="border: 1px solid black; word-wrap: break-word;"> GFG Placement Programme </td> <td style="border: 1px solid black; word-wrap: break-word;"> This course helps students to prepare for the Recruitment drive. </td> <td style="border: 1px solid black;">3 months</td> </tr> </table>

Output

Using word-wrap

2. Using word-break Property

The word-break: break-all; property is used to break the word at any character.

Syntax

word-break: break-all; HTML <h3 style="text-align:center;"> Wrap Table Cell td Content using word-break property </h3> <table width="600" style="border-spacing: 0px; table-layout: fixed; margin-left:auto; margin-right:auto;"> <tr> <th style="border: 1px solid black;">Course Name</th> <th style="border: 1px solid black;">Specifications </th> <th style="border: 1px solid black;">Duration</th> </tr> <tr> <td style="border: 1px solid black; word-break: break-all;"> Data Structures and Algorithms </td> <td style="border: 1px solid black; word-break: break-all;"> It includes pre-recorded premium <span style="color: red;"> Videolectures&programmingquestions </span> for practice. </td> <td style="border: 1px solid black;">4 months</td> </tr> <tr> <td style="border: 1px solid black; word-break: break-all;"> GFG Placement Programme </td> <td style="border: 1px solid black; word-break: break-all;"> This course helps students to prepare for the Recruitment drive. </td> <td style="border: 1px solid black;">3 months</td> </tr> </table>

Output

Using word-break

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.

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.

chitrankmishra Follow Improve Previous Article How to create a table row using HTML? Next Article