How to use automatic CSS hyphens with `word-break: break-all`?
Solution 1
The -ms-hyphens
property only works in IE10+. It's not possible in IE9 or below.
See the browser compatibility chart at the bottom of the reference link you provided.
It doesn't work in Chrome yet: WebKit Hyphenation
Solution 2
The word-break
property and hyphenation are two completely different things. The first one, originally intended for East Asian languages mainly, does bad things to languages like English: it arbitr arily cuts w ords at some poi nts without ind icating that a word has been broke n.
So you should decide whether you have an expression where a line break can be inserted by a browser at any point or whether you want hyphenation.
For hyphenation, the CSS code as such is OK, though many people would advice putting the standard property setting hyphens: auto
last, after prefixed properties. But it requires that the language of the text be declared in HTML markup, using e.g. <div lang=en>
. Moreover, browser support is still limited: IE 9 does not support such hyphenation, and the support in IE 10 covers a relatively small set of languages (including English of course).
For automatic hyphenation on IE 9, you would need to use either server-side programmed hyphenation or, simpler, client-side hyphenation with tools like Hyphenator.js.
Solution 3
Hyphens are inserted if the browser supports & language includes a hyphenation dictionary. But your
aaaaaaaaaaaaaaaaaa
isn't in a dictionary.
Therefore you have to insert soft hyphens ­
to your satisfaction like in https://jsfiddle.net/LJYj3/5/
Here's more food for thought: https://stackoverflow.com/a/856322/1696030
Comments
-
chovy almost 3 years
I'm using
word-break: break-all;
and want to know how I can have the browser automatically insert the hyphens, as demonstrated in an MDN example.div { width: 80px; height: 80px; display: block; overflow: hidden; border: 1px solid red; word-break: break-all; hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; }
<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Such that the text would look like this:
aaaaaaaa- aaaaaaaa- aaaaaaaa- aaaaaaaa
I created a JSFiddle too.
This needs to work in IE9/IE10, but it'd be nice if it'd work in Firefox and Chrome as well.
-
Hannes Schneidermayer almost 9 yearsAs of 2015, the world isn't ready for css hypens yet: caniuse.com/#feat=css-hyphens
-
user1380540 about 8 yearsCan you explain how that jsfiddle works? Where am I to insert the ­ ?
-
Volker E. about 8 years@user1380540 You can insert a
­
whereever you think it's appropriate to have a soft hyphen manual separation of a word. -
Shashank Bhatt over 4 yearsThanks for ­