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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.