Comments on: hyphens https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Mon, 18 Jul 2022 15:48:52 +0000 hourly 1 https://wordpress.org/?v=6.6.1 By: Fnordius https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1776191 Tue, 13 Jul 2021 09:18:23 +0000 http://css-tricks.com/?page_id=14059#comment-1776191 In reply to virakamrith.

Unfortunately, the hyphenation for each language uses dictionaries in the browser, and most languages other than English are not supported. This is because someone has to put in the effort to actually create and proofread each dictionary.

]]>
By: Valentin Born https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1766377 Thu, 24 Dec 2020 11:15:44 +0000 http://css-tricks.com/?page_id=14059#comment-1766377 Looks like Chrome 88 might catch up, finally! :)

]]>
By: Jass https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1751410 Sun, 15 Sep 2019 06:22:44 +0000 http://css-tricks.com/?page_id=14059#comment-1751410 In reply to Derek.

It’s just Chrome who is broken, not the others.

Go to https://bugs.chromium.org/p/chromium/issues/detail?id=47083 and vote that feature request!

]]>
By: dave https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1652365 Tue, 25 Sep 2018 18:31:08 +0000 http://css-tricks.com/?page_id=14059#comment-1652365 Looks like hyphenate-resources has been removed from the spec

]]>
By: DaVince https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1651546 Wed, 15 Aug 2018 14:00:57 +0000 http://css-tricks.com/?page_id=14059#comment-1651546 Kind of amazing that so many years later, Chrome still relies on the usage of a browser-specific prefix! I wonder what’s the hold-up.

Well, the prefix works, so I’m not complaining.

]]>
By: Ben https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1613848 Mon, 18 Dec 2017 03:11:17 +0000 http://css-tricks.com/?page_id=14059#comment-1613848 In reply to Mister Reader.

Try dealing with German on a 320 pixel wide (iPhone 5) display.

]]>
By: Zak https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1607402 Sun, 12 Mar 2017 23:06:33 +0000 http://css-tricks.com/?page_id=14059#comment-1607402 FYI, Chrome supports the hyphens property as of November 2016. https://www.chromestatus.com/feature/5642121184804864

]]>
By: Derek https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1605655 Wed, 21 Dec 2016 16:04:51 +0000 http://css-tricks.com/?page_id=14059#comment-1605655 In general, I think the hypens: auto property is one to avoid.

Upon upgrading to Chrome 55.0.2883.95, this property caused serious issues with tabular data on my site:

tabular data overlapping into neighboring columns,
arbitrary breaks,
and the failure for the browser to adjust the size of the column to the widest/biggest cell.

The more I think about it, the more I just don’t see much use for this property at all…

]]>
By: Luis https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1603748 Sat, 27 Aug 2016 13:36:21 +0000 http://css-tricks.com/?page_id=14059#comment-1603748 Thanks Sara for the article. I tried to use some of your recommendations but all of them fail in one way or another.

In my opinion hyphenation is a long way far from being practical. The best approach is to justify text and pray for the best. On tables I use ­ to hyphenate long words, otherwise on tablets and smartphones the result is a disaster. In short, unless all browser gurus agree to make standard rules all this is just a waste of time and a lot of wasted effort by idiots, like us, trying to make perfect web pages.
Yes, yes, I know they are the idiots not us.

]]>
By: Thomas https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1603258 Fri, 05 Aug 2016 10:49:11 +0000 http://css-tricks.com/?page_id=14059#comment-1603258 the snippet of the article should be updated, there are no reasons to declare

   ...
    word-break: break-all;

     // Non standard for webkit
     word-break: break-word;
    ...

and using

     -ms-word-break: break-all;
     word-break: break-all;

will simply force a break at random position in a word to go to a new line, avoiding hyphenation when supported

]]>
By: Tobias Buschor https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1600480 Wed, 23 Mar 2016 16:35:10 +0000 http://css-tricks.com/?page_id=14059#comment-1600480 Please star this chromium issue and comment on it if you like to use hyphens:auto crossbrowser:
https://bugs.chromium.org/p/chromium/issues/detail?id=47083

]]>
By: amn https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1600129 Wed, 09 Mar 2016 14:55:08 +0000 http://css-tricks.com/?page_id=14059#comment-1600129 The article pointed by the link http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/, is a French translation of MDN. Just saying.

]]>
By: Laura https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1599429 Wed, 03 Feb 2016 13:29:43 +0000 http://css-tricks.com/?page_id=14059#comment-1599429 In reply to Laura.

Clarification: text-overflow: ellipsis; is intended as a fallback if the last word doesn’t fit. Obviously it won’t help upstream in the block.

]]>
By: Laura https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1599428 Wed, 03 Feb 2016 13:22:47 +0000 http://css-tricks.com/?page_id=14059#comment-1599428 So after reading this thread and reviewing various specs, to avoid hyphenation, I came up with this:

.avoid-bad-hyphens {
  word-break: keep-all;
  overflow-wrap: normal;
  word-wrap: normal;
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
  text-overflow: ellipsis;
}

NB: I’m using “manual” values because this most-often comes up in titles that use larger fonts. Giving editors the opportunity to insert a soft hyphen seems to make sense. The overflow ellipsis I threw in as a fallback (but it’s not tested). What do you think?

]]>
By: Julian https://css-tricks.com/almanac/properties/h/hyphenate/#comment-1598341 Mon, 30 Nov 2015 13:36:53 +0000 http://css-tricks.com/?page_id=14059#comment-1598341 In reply to Julian.

I need to correct myself.
@Micah your solution does not work in MS Edge!

I just tested @Michael’s solution and it works in all browsers (Chrome, Safari, Firefox, Edge, IE9+). Thanks for sharing.

]]>