CODEWITHSUNDEEP
htmlcsshyphenationcss-hyphens
Jospo
Jospo

Reputation: 13

CSS hyphenate issues with longer words in Chrome

I am trying to use CSS hyphens to hyphenate long words, such as in this example

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 {
  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;
}
<p class="hyphenate">ANONYMOUSLY</p>
<p class="hyphenate">EXEMPLARITY</p>
<p class="hyphenate">THAT EXEMPLARITY</p>

In the last paragraph "Y" drops on the new line without any hyphenation.

Here is the CodePen example. Works fine in Safari, does not work in Chrome:

https://codepen.io/jospo/pen/MWWjzLe

Thanks for any suggestions.

Upvotes: 0

Views: 1352

Answers (1)

Paulie_D
Paulie_D

Reputation: 114979

hyphens is only a Working Draft CSS property at present and currently is not fully implemented or supported by all browsers.

I suggest you review the support tables at CanIUse.com which has the following notes.

Chrome < 55 and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property. It is advisable to set the @lang attribute on the HTML element to enable hyphenation support and improve accessibility.

For Chrome: Only supported on Android & Mac platforms (and only the "auto" value) for now.

Upvotes: 1

Related Questions