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.
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.
Method 2: Using word-break property: The word-break: break-all; property is used to break the word at any character.
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.
- How to prevent text in a table cell from wrapping using CSS?
- How to create equal width table cell using CSS ?
- How to create table cell using HTML5 ?
- How to wrap the text around an image using HTML and CSS ?
- How place a checkbox into the center of a table cell?
- How to group header content of a table using HTML5 ?
- How to group the body content in a table using HTML5 ?
- What is the difference between “word-break: break-all” versus “word-wrap: break-word” in CSS ?
- CSS | flex-wrap property
- CSS | word-wrap Property
- CSS | overflow-wrap Property
- Projecting Content into Components with ng-content
- How to add table row in a table using jQuery?
- How to remove table row from table using jQuery ?
- How create table without using <table> tag ?
- How to create table with 100% width, with vertical scroll inside table body in HTML ?
- How to make Bootstrap table with sticky table head?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.