How To Break Long Words In An HTML (or CSS) Table - Design-fluide

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 <div> or a <p>), 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

<table> <tr> <td style="width:75%"> Lorem ipsum dolor sit amet [...] </td> <td class="cell-breakWord"> Loremipsumdolorsitametconsectetur </td> </tr> </table> table { width: 100%; border-collapse: collapse; } .cell-breakWord { word-wrap: break-word; max-width: 1px; }

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.

** Not 75% in Firefox ** Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis dui.

Loremipsumdolorsitamet

<table> <tr> <td style="width:75%"> Lorem ipsum dolor sit amet [...] </td> <td class="cell-breakWord"> Loremipsumdolorsitamet </td> </tr> </table> table { width: 100%; border-collapse: collapse; table-layout: fixed; } .cell-breakWord { word-wrap: break-word; }

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

<table> <tr> <td style="width:75%"> Lorem ipsum dolor sit amet [...] </td> <td class="cell-breakAll"> Lorem ipsum lorem ipsum lorem ipsum </td> </tr> </table> table { width: 100%; border-collapse: collapse; } .cell-breakAll { word-break: break-all; }

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 <html> tag).

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

loremipsumdolorsitametconsectetur

<html lang="en"> <head></head> <body> <table> <tr> <td style="width:75%"> Lorem ipsum dolor sit amet [...] </td> <td class="cell-hyphens"> loremipsumdolorsitametconsectetur </td> </tr> </table> </body> </html> table { width: 100%; border-collapse: collapse; } .cell-hyphens { word-wrap: break-word; max-width: 1px; -webkit-hyphens: auto; /* iOS 4.2+ */ -moz-hyphens: auto; /* Firefox 5+ */ -ms-hyphens: auto; /* IE 10+ */ hyphens: auto; }