Css table word wrap break word

How to Wrap the Content of a Table Cell

As we know, the contents of a table can change its structure or dimensions. So, there can be several difficulties with table cells. For example, long words in a table cell may cause the cell width to increase, or long words may cross the cell borders. But you can avoid these by using word wrapping on the cell content.

In this snippet, we suggest two methods: either using the CSS word-wrap or word-break property.

Solution with the CSS word-wrap property

Use the border-collapse property set to «collapse» and table-layout property set to «fixed» on the element. Also, specify the width of the table. Then, set the word-wrap property to its «break-word» value for elements and add border and width to them.

Example of wrapping the content of a table cell with the word-wrap property:

html> html> head> title>Title of the document title> style> table < border-collapse: collapse; table-layout: fixed; width: 310px; > table td < border: solid 1px #666; width: 110px; word-wrap: break-word; > style> head> body> table> tr> td>1 td> td>What is Lorem Ipsum? td> td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. td> tr> tr> td>2 td> td>Why do we use it? td> td>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. td> tr> table> body> html>

If you want to wrap a word on a new line, use the word-wrap property, but if you need to break it at any appropriate character, use the word-break property.

Solution with the CSS word-break property

Example of wrapping the content of a table cell with the word-break property:

html> html> head> title>Title of the document title> style> table < border-spacing: 0px; table-layout: fixed; margin-left: auto; margin-right: auto; width: 310px; > td < border: 1px solid #666; word-break: break-all; > style> head> body> table> tr> td>1 td> td>What is Lorem Ipsum? td> td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. td> tr> tr> td>2 td> td>Why do we use it? td> td>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. td> tr> table> body> html>

Источник

Css table word wrap break word

When the table-layout CSS property is set to fixed, the table and column widths are set by the width of the first row of cells.

Cells in subsequent rows don’t affect column widths.

Copied! 
table  table-layout: fixed; width: 400px; border-collapse: collapse; > 

You can also set the width of the table to 100% if you want it to take up the width of the parent element.

Copied! 
table  table-layout: fixed; width: 100%; border-collapse: collapse; > 

The last step is to set the word-wrap CSS property to break-word on the td elements.

Copied! 
table td  word-wrap: break-word; border: 1px solid black; > 

When the word-wrap CSS property is set to break-word , then unbreakable words are allowed to be broken at arbitrary points if there are no acceptable break points in the line.

Here is an example that better illustrates how this works by using unbreakable words in a table cell.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> style> table  table-layout: fixed; width: 400px; border-collapse: collapse; > table td  word-wrap: break-word; border: 1px solid black; > table th  border: 1px solid black; > style> head> body> h2>bobbyhadz.comh2> br /> br /> table id="example-table"> thead> tr> th>Nameth> th>Positionth> tr> thead> tbody> tr> td>Tigertd> td> bobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.combobbyhadz.com td> tr> tr> td>Jenettetd> td>Development Leadtd> tr> tr> td>Yuritd> td>CMOtd> tr> tbody> table> body> html> 

The text in the table cell is wrapped even though the words are unbreakable (no spaces).

You can also set the overflow-wrap property to break-word .

Copied! 
table td  /* 👇️ for older browsers */ word-wrap: break-word; overflow-wrap: break-word; border: 1px solid black; > 

When the overflow-wrap property is set to break-word , normally unbreakable words are allowed to be broken at arbitrary points if there are no acceptable break points in the line.

The overflow-wrap property differs from word-wrap in that it only creates a break if an entire word cannot be placed on its own line without overflowing.

# Wrap the content of a table cell using break-all

You can also set the word-break CSS property to break-all to wrap the content of table cells using CSS.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> style> body  margin: 100px; > table  table-layout: fixed; width: 400px; border-collapse: collapse; > table td  word-break: break-all; border: 1px solid black; > table th  border: 1px solid black; > style> head> body> h2>bobbyhadz.comh2> br /> br /> table id="example-table"> thead> tr> th>Nameth> th>Positionth> tr> thead> tbody> tr> td>Tigertd> td> bobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadz td> tr> tr> td>Jenettetd> td>Development Leadtd> tr> tr> td>Yuritd> td>CMOtd> tr> tbody> table> body> html> 

This time, we set the word-break CSS property to break-all .

Copied! 
table td  word-break: break-all; border: 1px solid black; > 

When the property is set to break-all , word breaks are inserted between any two characters.

# Make sure white-space is not set to nowrap

If you aren’t able to wrap the content of table cells, make sure that your td elements aren’t inheriting a white-space CSS property that’s set to nowrap .

When the value of white-space is set to nowrap , then whitespace is collapsed as normal, however, line breaks are suppressed.

Here is an example that demonstrates this issue.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> style> body  margin: 100px; > table  table-layout: fixed; width: 400px; border-collapse: collapse; > table td  white-space: nowrap; word-break: break-all; border: 1px solid black; > table th  border: 1px solid black; > style> head> body> h2>bobbyhadz.comh2> br /> br /> table id="example-table"> thead> tr> th>Nameth> th>Positionth> tr> thead> tbody> tr> td>Tigertd> td> bobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadzbobbyhadz td> tr> tr> td>Jenettetd> td>Development Leadtd> tr> tr> td>Yuritd> td>CMOtd> tr> tbody> table> body> html> 

Notice that the td elements have their white-space property set to nowrap .

Copied! 
table td  white-space: nowrap; word-break: break-all; border: 1px solid black; > 

This prevents the content in the table cells to wrap.

Instead, set the white-space property to normal .

Copied! 
table td  white-space: normal; word-break: break-all; border: 1px solid black; > 

You might also have to use the !important flag if you need to override an existing style.

Copied! 
table td  white-space: normal !important; word-break: break-all; border: 1px solid black; > 

After setting white-space to normal , the issue is resolved.

The white-space property also has a pre-wrap value where sequences of white space are preserved and lines are broken at newline characters, at
and as necessary to fill line boxes.

Copied! 
table td  white-space: pre-wrap !important; word-break: break-all; border: 1px solid black; > 

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

How to break long words in an HTML (or CSS) table

If you’re reading this you’re either curious or you’ve got serious issue trying to handle long words in a table cell. As I had. So, here is a full review of my investigations to save you some time.

Following solutions work on both HTML and CSS tables, and are supported by modern browsers and IE8+.

1. [#] Breaking words with word-wrap and max-width
2. [#] Breaking words with word-wrap and table-layout
3. [#] Breaking words with word-break
4. [#] Make breaks more elegant using CSS hyphens

Breaking words with word-wrap and max-width

word-wrap prevents a long word from overflowing its container by breaking the text onto the next line. It works fine when applied on a block element (such as a or a

), but has no effect within a table .

To get word-wrap working on a table cell, max-width: 1px is the magic fix you need:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui. Duis tempor ligula scelerisque sodales faucibus. Quisque sodales leo nec.

Loremipsumdolorsitametconsectetur

 
 
 
Lorem ipsum dolor sit amet [. ]
 
Loremipsumdolorsitametconsectetur
 
 

Note this max-width trick also works to make an ellipsis within a table.

Should I use word-wrap or overflow-wrap ?

word-wrap is the historic and nonstandard property. It has been renamed to overflow-wrap but remains an alias browers must support in future. Many browsers (especially the old ones) don’t support overflow-wrap and require word-wrap as a fallback (which is supported by all).

If you want to please the W3C you should consider associate both in your CSS. If you don’t, using word-wrap alone is just fine.

Breaking words with word-wrap and table-layout

Associate word-wrap and table-layout: fixed works to break long words in a table cell, but this solution has some constraints you should consider carefully.

By using table-layout with fixed value you change the algorithm used to lay out table cells, rows, and columns:

• In Firefox , paddings and borders are not taken into account in the calculation of the column widths. That means columns won’t size exactly the way you defined them.
• In all browsers , if no width has been defined, columns will all get the same size which is maybe not what you want.

 
 
 
Lorem ipsum dolor sit amet [. ]
 
Loremipsumdolorsitamet
 
 

Breaking words with word-break

word-break specifies how words should be broken when reaching the end of the line.

Used with the break-all value, browsers will insert line break between any two characters , while word-wrap will only create a break if the word can’t stand on its own line.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui. Duis tempor ligula scelerisque sodales faucibus.

Lorem ipsum lorem ipsum lorem ipsum

 
 
 
Lorem ipsum dolor sit amet [. ]
 
Lorem ipsum lorem ipsum lorem ipsum
 
 

Make breaks more elegant using CSS hyphens

hyphens property allows text to be hyphenated when words are too long to fit in one line. Hyphenation opportunities depend on the language of your content.

Native support is not that good at the moment. Worst thing is hyphens is not working at all in Windows Chrome (it does work on Android and Mac OS plateforms). Proprietary prefixes and one of the word-wrap fix ( max-width or table-layout ) as a complement are necessary to make this solution viable.

Since hyphenation rules are language-specific, you also need the lang attribute to be defined on a parent element (mostly on the tag).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui. Duis tempor ligula scelerisque sodales faucibus. Quisque sodales leo nec.

loremipsumdolorsitametconsectetur

   
 
 
Lorem ipsum dolor sit amet [. ]
 
loremipsumdolorsitametconsectetur
 
 
   

Источник