Wrap Or Break Long Word (text) In HTML Table Cell - Dev Bay

Tables in HTML are a quite strange elements. You can set some CSS rules, link width for columns, and some times – nothing happens. It means – all HTML table’s columns width stay the same. This happens especially when in table cell is placed a very long text – the single word (or basically, a long string without spaces) – so there is very long word (without spaces) in table cell which makes whole HTML table “explodes” and changes its column’s widths, and there is no easy way to set proper column width and break the word.

I will show in this article how to break (or wrap) long word in a HTML table cell.

Table of Contents

• Breaking long text in table
• How to break long word (text without spaces) in HTML table’s cell?
• When to break words in HTML tables?
  • All HTML tables with user’s manual input
  • Multilingual website – text break in HTML table
  • Related posts:

Breaking long text in table

Here is the live example of this situation, when we have a very long word in HTML table cell and it breaks totally the proportion between columns widths. First and second HTML table’s column should take 25% of table’s width, third 20%, and the last one – 30%. But this one single word in last column makes it much more longer than 30% of HTML table width. As the result whole HTML table has wrong column’s widths. Check it below:

HTML table example of long word in table cell:

<table> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Details</th> </tr> </thead> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td> LoremipsumdolorsitametconsecteturadipiscingelitIntegemagnanunc </td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> <td> LoremipsumdolorsitametconsecteturadipiscingelitIntegemagnanunc </td> </tr> </tbody> </table>

CSS:

table { width: 100%; border-spacing: 0; border-collapse: collapse; } table td { } table td, table th { border: 1px solid #dadada; padding: 5px; } table thead th { text-align: left; } table thead th:nth-child(0), table thead th:nth-child(1){ width: 25%; } table thead th:nth-child(2){ width: 20%; } table thead th:nth-child(3){ width: 30%; }

RESULTS:

How to break long word (text without spaces) in HTML table’s cell?

This is very, very easy! We must add only a CSS property to HTML table cell <td> tag – “word-break: break-all;” then all column’s widths become as intended. It means that even if in HTML table cell there is a very long word, that column’s width will be obligatory, and if word will be too long, than it will be broken.  Check it in example below:

CSS:

td { word-break: break-all; }

RESULTS:

When to break words in HTML tables?

In my opinion we as web or front-end developers, we should put above CSS rules for breaking long word in HTML always when we can’t be certain of the content in the table and when HTML table column’s widths should stay as defined.

Let’s now focus on a few examples when IMHO we should always, by default, set above CSS rule for word breaking in table:

All HTML tables with user’s manual input

Here situation depends on the data which user enters into the table cells. In my opinion, in this case we should by default almost always set CSS rule (above) to break long word (text) in a table cell. Why? Because we never know when user will put some long text in a table cell. Even if table will contain only numerical data, than it can happen that, let’s say, user will enter financial data for a currency with low value, and the numbers will be huge there, like “1200000000”. This can also make whole table hard to read, especially, when there was, let’s say, column width set to 50px.

If this example is a table only with numbers and there is some limitation of number in a place where data is stored (like data base), than maybe there is no need to put CSS rule for breaking long words in a table.

Multilingual website – text break in HTML table

Next good example when we should by default break long word (string without spaces) in table on web site or web application with multilingual versions. Why? Because in many languages there are in common use a very long words. Good example is German.

Let’s think about example with HTML table about food and in one header we have text: “Food intolerance”. Nothing special. If we have a narrow column than in English nothing will happen. But the same word in German is: “Nahrungsmittelunverträglichkeit”. Makes difference, doesn’t it?

So when we know that certain website or web app will have in the future multilingual versions, than we always must put CSS rule for HTML tables cells to break long words (strings/texts without spaces)!

I hope that with this very short CSS rule you will be able to solve in your project the problem of breaking too long word in HTML table cell 🙂

Related posts:

Front-end basics: #3 HTML5 – form validation CSS: Center text/image/div vertically and horizontally Insert JavaScript vuejs/react/angular apps into SalesForce page