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>

score 4 · Answer 1 · edited May 23 '17 at 12:33

4

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.

edited May 23 '17 at 12:33

Community

1
1

answered May 11 '13 at 15:03

Martin Turjak

20,426
5
54
76

score 4 · Answer 2 · answered May 11 '13 at 15:16

4

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.

answered May 11 '13 at 15:16

Ben Reich

15,896
2
36
57

Thanks for the info, I'll check it out. – user2014429 May 11 '13 at 15:33
2

Ben, you basically wrote up the same suggestions I did. That makes it then more likely that they are correct ;-) I tested the `hyphens` in different browsers, and the results were quite inconsistent the second link that I provided in the answer also offers a compatibility table https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens?redirectlocale=en-US&redirectslug=CSS/hyphens#Browser_compatibility So yes ... I guess the hyphenator will be the way to go until the `hyphens` become more widely supported. – Martin Turjak May 11 '13 at 18:00

score 1 · Answer 3 · answered May 11 '13 at 15:52

1

Please see this fiddle, may be work.

`http://jsfiddle.net/76qBy/`

answered May 11 '13 at 15:52

dsfg

120
9

2

this is the origal jsfiddle version that I posted, I think you might have forgotten to add the update version number after '/' thanks. – user2014429 May 11 '13 at 16:13
I think this is the updated version http://jsfiddle.net/76qBy/2 – Akalonda Dec 04 '19 at 13:56

Add hyphen before word-break

3 Answers3

Linked