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

user_14901278 0
Viewed 7329

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

css html
2 Answers

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>

user_48733760

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

user_7189600
Related