CODEWITHSUNDEEP
htmlcss
user2014429
user2014429

Reputation: 2567

Add hyphen before word-break

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>

Upvotes: 5

Views: 5509

Answers (3)

Martin Turjak
Martin Turjak

Reputation: 21214

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.

Upvotes: 4

dsfg
dsfg

Reputation: 130

Please see this fiddle, may be work.

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

Upvotes: 1

Ben Reich
Ben Reich

Reputation: 16324

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.

Upvotes: 4

Related Questions