title: CSS hyphenate issues with longer words in Chrome
body: <p>I am trying to use CSS hyphens to hyphenate long words, such as in
  <a href="https://i.stack.imgur.com/5ZjEP.png" rel="nofollow noreferrer">this example</a></p>
  
  <p>As you can see the last letter drops on the new line. This happens in Chrome, not for example in Safari. As my layout is using blocks of certain width and I would like to fit the words into blocks, the solution is not to change the font-size or block width, but rather to solve the hyphenate issue.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p {
    width: 105px;
    border: 1px solid black;
    text-align: center;
  }
  
  p.hyphenate {
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="hyphenate"&gt;ANONYMOUSLY&lt;/p&gt;
  &lt;p class="hyphenate"&gt;EXEMPLARITY&lt;/p&gt;
  &lt;p class="hyphenate"&gt;THAT EXEMPLARITY&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the last paragraph "Y" drops on the new line without any hyphenation.</p>
  
  <p>Here is the CodePen example. Works fine in Safari, does not work in Chrome:</p>
  
  <pre><code>https://codepen.io/jospo/pen/MWWjzLe
  </code></pre>
  
  <p>Thanks for any suggestions.</p>