Hyphenate anything

If you're like me and keep running low on horizontal space in web design nowadays. Don't worry - I have a nice solution.

Hyphenate!

If you do not care at all about language and words and breaking them in the "correct" way this is the way to do it.

function addSoftHyphensToWord(word) {
  return word.split("").join(String.fromCharCode(173));
}

function addSoftHyphens(text) {
  return text.split(" ").map(addSoftHyphensToWord).join(" ");
}

And in your CSS you add these rules.

.break-with-manual-hyphens {
  word-break: break-all;
  hyphens: manual;
}

Now your text will break anywhere. This is great.

Until next time.