43

I use the following css to auto hyphen text in my website:

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

But in chrome this has no effect. I already read, that chrome doesn't support this. Is there any workaround for hyphenation in chrome? Thanks!

cypher75
  • 2,099
  • 4
  • 18
  • 18
  • 2
    no pure css solution. but if use javascripit , it can be done, check out this javascript library [link](https://github.com/mnater/hyphenator) – Eric So Aug 19 '15 at 12:02
  • 2
    Star this chromium issue and comment on it: https://bugs.chromium.org/p/chromium/issues/detail?id=47083 – Hans Gustavson Mar 23 '16 at 16:28
  • The chrome-team is working on this: https://bugs.chromium.org/p/chromium/issues/detail?id=605840 – Dennis Guse Jan 05 '17 at 10:35
  • 1
    Works in Mac/Android Chrome since Nov 2016, but not on Windows. – certainlyakey Jun 15 '17 at 07:05
  • In Chrome (62.0) you can currently use `hyphens: initial` to undo a previous `hyphens: none` (and allow hyphenation at `­`) though the property doesn't appear to support setting any specific value other than `none`. – Jake Nov 26 '17 at 04:43

3 Answers3

26

Hyphenation is currently supported on Chrome only on Android and macOS (and only the "auto" value), as you can see here: http://caniuse.com/#search=hyphens

I used Hyphenator too, as suggested by Eric.

kaosmos
  • 558
  • 9
  • 23
  • There's no hypenathor in that production website. – reallynice Aug 02 '16 at 08:42
  • 1
    @reallynice that's true, the site has changed in the meanwhile. You can see it in these archive.org snapshot: https://web.archive.org/web/20150419034614/http://www.chiantibanca.it/privacy-policy-S6A158E170.htm – kaosmos Aug 02 '16 at 17:29
  • 2
    The hyphenation does not work in Chrome on MacOs. I'm not sure about Google's Official position, but even the online CS "Try It Now" sites don't work. – David J Nov 26 '18 at 17:24
6

Soft hyphens can be applied with JavaScript (best solution) or any server-side language, however, that answers the question with its own answer.

tfont
  • 10,891
  • 7
  • 56
  • 52
  • 6
    That's true - unfortunately the only way for chrome right now. But beware: Doing this can affect accessibility: Screen readers will read every syllable, not whole words – Philipp Jul 02 '16 at 18:11
6

In case anyone else made the mistake I did, hyphens only work if you declare the language in the HTML tag. For example: <html lang="en-GB">

Without a language declared hyphens:auto will do nothing.

ToddPadwick
  • 430
  • 1
  • 6
  • 13