Add hyphen before word-break

Question

Maybe this is not possible, but I was wondering if there is a way to automatically insert a hyphen to the end of a long string with no whitespace before breaking a word? This jsfiddle demonstrates the issue I am having. Thank you.

table {
        width:200px; 
        word-wrap:break-word;
        table-layout: fixed;
      }

<table>
  <td>Pneumonoultramicroscopicsilicovolcanoconiosis</td>
</table>

Answer 1

For webkit browsers this should work:

table 
{
   width: 200px;
   word-break: break-word;
   -webkit-hyphens: auto;
}

This works for me on iOS Chrome, but not OS X Chrome. This blog post explains the solution for other browsers, although, it still didn't work for me on OS X Chrome.

The solution shown there is:

table 
{
   -ms-word-break: break-all;
   word-break: break-all;

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

   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
}

If this doesn't work in the browsers you need, check out hyphenator - a javascript utility that may better accomplish what you need.

Answer 2

I think your best bet would be a javascript solution.

• There is a hyphens property in css3, does not do exactly what you want (at least not in all browsers yet) I think, but might be interesting, you can read on it here or here.

• Or here they discuss it a little too and mention a javascript plugin hyphenator: wordwrap a very long string

Hope some of this helps.