CSS hyphens behaviour change in Chrome 55.0.2883.95

Question

It seems like setting "hyphens" to "auto" now takes higher priority than "white-space: nowrap". In previous versions of Chrome (54 prior in Mac) and other browsers (FF, Safari, IE), it seems like "white-space: nowrap" outbids the hyphens. So, if you specify white-space: nowrap and text-overflow: ellipsis, you see the text gets truncated with ellipsis regardless of hyphens setting.

Starting from 55.0.2883.95 (Mac version), it seems like hyphens: auto will do the line-wrapping even when white-space: nowrap is specified. I agree that it sounds silly to specify hyphens and nowrap at the same time.. But since this is a "new" behaviour, I'd like to confirm whether this is a bug or an intended behaviour.

I created a simple fiddle for testing this issue for comparing behaviours across other browsers.

div {
  width: 75px;
  border: 1px solid black;
}
div.testCls {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

<div lang="en" class="testCls">Anextremely long English word</div>

Screenshots:

Chrome in Mac 55.0.2883.95 (64-bit)

Answer 1

I believe it's chrome's problem; same code works fine in firefox and safari;

the way to fix this, just add hyphens:none; into ur truncate class.

Answer 2

As for Chrome using hyphen: auto if you look at caniuse you will see that the auto property for Chrome is not supported. And when I tested this no hyphens were shown in Chrome (unless you use the hyphens manual method).

Based on your question I didnt find formal documentation to answer your question but I tested your code on Chrome, Firefox and IE (on Windows) and found that using white-space: nowrap; in all cases caused the text not hyphenate. As long as the nowrap value is being used this also cause the overflow: hidden; element and text-overflow: ellipsis; to work as expected since both those elements need non wrapping text to showcase their properties. Hope that helps