Looking at caniuse.com, the CSS-attribute hyphens:auto should work in edge version 105 upwards. But, it doesnt - sometimes.
The following screenshot shows at the left hand side an testing html-file in firefox, an it shows well. On the right hand side we find edge version 108 without hyphenation. However on another system with edge version 110 it works perfectly, see second screenshot.
- Is something wrong with our CSS or html?
- Is there a problem with Edge version 108, such that
hyphens:autois broken? - Is there some hidden setting or magic flag in Edge to disable hyphenation, maybe some possibility for the admin of our organization to touch this?
- Or something completely different?
body {
word-break: break-word;
hyphens: auto;
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
</head>
<body>
<table style="width:100%">
<thead>
<tr>
<th style="width:50%">
<h1 lang="de">Donaudampfschifffahrtsgesellschaftkapitän</h1>
</th>
<th style="width:50%">
<h1 lang="en">A superextraordinarily long English word!</h1>
</th>
</tr>
</thead>
</table>
<div id="navigator" />
<script type="text/javascript">
document.getElementById("navigator").innerText = navigator.userAgent;
</script>
</body>
</html>Update:
Our organization updated Edge to version 110 - and hyphenation still does not work. So we have two systems with the same version and different behaviour of the hyphens.
On my newly-installed VM with Microsoft Edge and Google Chrome (both up to date), I have tested your code and interestingly the hyphens didn't show up (Firefox works as expected). Then, I think the issue may not be caused by any version not supporting
hyphens: auto.I successfully re-enabled the automatic hyphenation by manually checking for update of the Hyphenation component at edge://components. Also have done the same in Chrome and it works fine now. This, I believe, can serve as an inspiration for you.