css hyphens not working properly in chrome when using only two words

Question

 .container { width: 250px; background-color: red; }.hyphenate { width: 230px; font-size: 40px; margin-bottom: 0.6em; text-align: left; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }

 <div class="container"> <h1 class="hyphenate">this internationalization </h1> </div>

I'm currently working on a web page, I have this tag in which I want to apply hyphenation, I used multiple combinations of attributes in CSS

.hyphenate {
          font-size: 40px;
          margin-bottom: 0.6em;
          text-align: left;
          hyphens: auto;
          -ms-hyphens: auto;
          -webkit-hyphens: auto;
          -moz-hyphens: auto;
        }

this combination works perfectly in Firefox and Safari in both desktop and mobile versions, but I cannot get it to work in chrome, I have also tried other combination with word-break , word-wrap and overflow-wrap but the problem is still there. I have also read that it is a chrome bug but according to the last information from https://caniuse.com/?search=hyphens , it states that there is partial support with the auto value.

Here is the example I'm using: this is the text breaking properly on Safari and firefox

this what I get when I open the page on chrome (both desktop and mobile) the Hyphenation works properly in chrome only when the header contains at least 3 words. and this what I get when I only use two words in chrome, it causes an overflow and does not break, but it breaks correctly in firefox and safari I'm using chrome on a mac with version 87.0.4280.88 which is currently the latest and android chrome version 87.0.4280.101 I would be thankful for any help.

Answer 1

This looks like crbug.com/1022415 , which was fixed in Chrome 89. It works as expected when I tried in my local test. For your snippet, you need to add the lang="en" attribute.

 .container { width: 250px; background-color: red; }.hyphenate { width: 230px; font-size: 40px; margin-bottom: 0.6em; text-align: left; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }

 <div class="container" lang="en"> <h1 class="hyphenate">this internationalization </h1> </div>

Answer 2

Chrome does not support hyphens: auto; (as on 2021-01-12) only FireFox, Edge classic do this.