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.