JSFiddle - React, Tailwind, and code Playground

by dmitrytorba

HTML

<BUTTON>Some really long text, probably in German</BUTTON>

CSS

button {
    width: 100px
}

JavaScript

var buttons = document.getElementsByTagName('button');
for(var j=0; j < buttons.length; j++) {
    var button = buttons[j];
    var text, words, numSplits;
    var spacing = 0;
    while(button.scrollWidth !== 0 && button.scrollWidth > button.clientWidth) {
        if(!spacing) {
            text = button.innerHTML;
            words = text.split(' ');
            numSplits = Math.ceil(button.scrollWidth / button.clientWidth);
            spacing = Math.round((words.length)/numSplits);
        }
        for(var i = spacing; i < words.length; i+=spacing+1) {
            words.splice(i , 0, '<br />');
        }          
        button.innerHTML = words.join(' ');
        spacing--;
        words = text.split(' ');
    }
}