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