Break Long Word in Table Cell with Percentage Widths

Break long word in table cell with percentage widths

Guys take a look on http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
   -ms-word-break: break-all;
   word-break: break-all;

   /* Non standard for webkit */
   word-break: break-word;

   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;

Table cell widths - fixing width, wrapping/truncating long words

Stack Overflow has solved a similar problem with long lines of code by using a DIV and having overflow-x:auto. CSS can't break up words for you.

word-wrap:break-word in 100% table-cell

Use word-break instead of word-wrap for webkit + opera and hypehns for moz and IE10+ (you need a lang attribute declared).
For earlier versions of IE you'll just have to use word-break: break-all.

JSFiddle

HTML

<div id="a" lang="en">
    ...
</div>

CSS

#c {
    *word-break: break-all;
     word-break: break-word;

    -moz-hyphens: auto;
     -ms-hyphens: auto;
         hyphens: auto;
}

Strange behavior on table and table-cell with percentage width

The auto tabular layout is not specified by the standard, so I recommend against using this kind of percentage tricks, which will probably break on some browsers.

However, it seems most browsers behave like this:

• The ::before and ::after pseudo-elements will take the specified percentage of the table.
• The text is wrapped inside an anonymous cell which has the width of the text. That will represent the remaining percentage left by the pseudo-elements.
• The width of the table will be determined by the constraints above.

So if you have width: 25%, the text will take the remaining 50%.

tablewidth = textwidth / 50% = 2 * textwidth
pseudowidth = 25% * tablewidth = 0.5 * textwidth

If you have width: 40%, the text will take the remaining 20%.

tablewidth = textwidth / 20% = 5 * textwidth
pseudowidth = 40% * tablewidth = 2 * textwidth

If you have width: 45%, the text will take the remaining 10%. That is, the table will double its width with respect to the previous case, if the text is the same.

tablewidth = textwidth / 10% = 10 * textwidth
pseudowidth = 45% * tablewidth = 4.5 * textwidth

Of course, things start to get tricky if the desired table width calculated as described above exceeds the containing block. Then

• The table will be as wide as the containing block

• The text cell will have the width resulting of resolving the remaining percentage left by the pseudo-elements. That will be less than the preferred width of the text, so the text will wrap into multiple lines.

  However, the text cell won't be narrower than the minimum required width of the text. That will usually be the width of the longest word, but may change due to e.g. word-break: break-all or white-space: nowrap.

• The remaining space left by the text will be equally distributed among the pseudo-elements.

  If the remaining space is negative, the pseudo-elements will have 0 width, and the table will grow (overflowing the containing block) in order to compensate that.

Automatic column width with `overflow-wrap: break-word`

I think either you should go with display flex or add a small tweak in the CSS like shown below.

.table-wrap tr > td:nth-child(1),
.table-wrap tr > td:nth-child(2) {
  white-space: nowrap;
}

.table-wrap tr > td:nth-child(3) {
  word-break: break-word;
}

th,td {
  padding: 0px 16px
}

<table class="table-wrap" style="width: 100%;">
  <tr>
    <th>ID</th>
    <th>Time</th>
    <th>Data</th>
  </tr>
  <tr>
    <td>0</td>
    <td>10:11</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space</td>
  </tr>
  <tr>
    <td>1</td>
    <td>10:12</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space</td>
  </tr>
  <tr>
    <td>2</td>
    <td>10:13</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space_and_it_may_be_so_long_that_it_wont_fit_into_the_column_and_needs_to_be_wrapped</td>
  </tr>
</table>

---

Related Topics