CODEWITHSUNDEEP
cssgoogle-chrometext-alignhyphenationword-break
drrobotnik
drrobotnik

Reputation: 749

css3 word-wrap:break-word / break-all, no hyphen

CSS3 specs say there is partial support for word-wrap:break-word; In Chrome you must use word-wrap:break-all; but there is no hyphen. I'm using text-align:justify; Has any come up with a solution for there to be a hyphen on word break in chrome?

I've seen this question a couple times, but haven't come across a complete solution.

Here's a code sample of how I'm currently using it.

    .threecolumn {
      -moz-column-width: auto;
      -moz-column-count: 3;
      -moz-column-gap: 20px;
      -moz-column-rule-color: none;
      -moz-column-rule-style: none;
      -moz-column-rule-width: 0;
      -webkit-column-width: auto;
      -webkit-column-count: 3;
      -webkit-column-gap: 20px;
      -webkit-column-rule-color: none;
      -webkit-column-rule-style: none;
      -webkit-column-rule-width: 0;
      column-width: auto;
      column-count: 3;
      column-gap: 20px;
      column-rule-color: none;
      column-rule-style: none;
      column-rule-width: 0;
      text-align: justify;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      word-wrap: break-word;
      word-break:break-all; /* chrome, no hyphens :( */
    }

jsFiddle

Works find in FF and Safari.

Using: Firefox:17 Chrome: 23 Safari: 6.0.2

Upvotes: 1

Views: 6285

Answers (1)

Santiago Baigorria
Santiago Baigorria

Reputation: 696

Google Chrome doesn't support CSS4 "hyphens" feature: http://generatedcontent.org/post/44751461516/finer-grained-control-of-hyphenation-with-css4-text

I have just asked support if they can add the feature / support for the property. Hope they add it..........

Upvotes: 1

Related Questions