How to use automatic CSS hyphens with `word-break: break-all`?

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

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

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.

I was not able to find any css solution for this, so fix it with js.

const addWordBreaks = (str, maxLength = 10) => {
    const words = str.split(" ");
    const newWords = [];
    words.forEach(function(word) {
      if (word.length > maxLength) {
        const firstWord = word.substr(0,maxLength);
        const endWord = word.substr(maxLength, word.length-1);
        newWords.push(firstWord +"- \n");
        newWords.push(endWord)
      } else {
        newWords.push(word)
      }
    });
     return newWords.join(" ");
  }