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

Question

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

CSS3 Hyphenation isn’t supported in Chrome yet – Sudarshan Jan 09 '13 at 04:54 — Sudarshan, Jan 09 '13 at 04:54

score 1 · Answer 1 · edited Sep 14 '13 at 05:09

1

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..........

edited Sep 14 '13 at 05:09

Artem Russakovskii

21,516
18
92
115

answered Apr 18 '13 at 14:22

Santiago Baigorria

700
1
6
15

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

1 Answers1