CODEWITHSUNDEEP
cssmicrosoft-edge
jac
jac

Reputation: 37

How to get auto hyphens working in Edge 88?

It seems the hyphens property doesn't work in Edge. caniuse.com says it's supposed to work with Edge 88 - which I have. But it ain't working. Throw on the -ms- vendor prefix and it works in Internet Explorer but not at all in Edge. (Odd that anything works in IE and not Edge.) The only thing that works in Edge is to bloat your HTML with soft hyphens all over the place (­) - and with that no CSS is needed. Buuuuuut - CSS hyphens:auto adds hyphens automatically without the need for ­. So - is caniuse.com wrong? Is there a hack to make auto hyphens work in Edge?

Upvotes: 2

Views: 1927

Answers (2)

ufdada
ufdada

Reputation: 1

At least since version 95 Edge chromium finally seems to support hyphens auto without third party libraries like Hyphenator or Hyphenopoly.

Here a small test using a modified version of the mdn test (without shy entities)

<html>

  <head>
    <style>
      div {
        hyphens: auto;
        border: 1px dashed black;
      }
    </style>
  </head>

  <body>
    <div style="width: 55px;" lang="en">An extremely long English word</div>
  </body>

</html>

Upvotes: 0

Yu Zhou
Yu Zhou

Reputation: 12999

Edge 88 doesn't suppoet hyphens:auto. You can try the CSS Demo: hyphens in this page in Edge 88. Besides, the Browser compatibility table also shows only Edge 12+ (Edge Legacy) supports it. So maybe there's something wrong with caniuse.com.

As a workaround, you can use Hyphenopoly.js. It's a JavaScript-polyfill for hyphenation in HTML: it hyphenates text if the user agent does not support CSS-hyphenation at all or not for the required languages and it is a Node.js-module. You can test the example in Edge 88 and it works well:

enter image description here

Upvotes: 2

Related Questions