Words are breaking sometimes

[joelalexandersson]

I'm having some problems with words breaking. Letters are sometimes placed on the second line by themselves. Any advice on how to solve that?

Resizing the font size on https://www.spltjs.com/ does exactly the same.

[loganliffick]

Hey Joel!

Thanks for checking out splt! This is by far the toughest side-effect to tackle. Web browsers don't care how character-wrapping works (words, lines, etc.) so it's up to the container width to solve. My hacky solution has been to either set a variable width to the container itself or call splt.revert once you no longer need the text in its split state.

Let me know if you have any ideas!

[joelalexandersson]

I see.. it’s not possible to first split the string into ’words’ in any way? I see that that is what others do. That would be great!

MVH Joel Alexandersson

24 maj 2022 kl. 16:23 skrev Logan Liffick @.***>:

Hey Joel!

Thanks for checking out splt! This is by far the toughest side-effect to tackle. Web browsers don't care how character-wrapping works (words, lines, etc.) so it's up to the container width to solve. My hacky solution has been to either set a variable width to the container itself or call splt.revert once you no longer need the text in its split state.

Let me know if you have any ideas!

— Reply to this email directly, view it on GitHub https://github.com/loganliffick/splt/issues/3#issuecomment-1135995981, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABK6IJNEMFGFA2Z6BB4HZ7DVLTQ55ANCNFSM5WVMVCEA. You are receiving this because you authored the thread.

[joelalexandersson]

Here is the solution for you:

`function splt({ target = '.splt', reveal = false }) { let saveOriginal = []; //grab instances const inst = document.querySelectorAll(target);

for (let a = 0; a < inst.length; a++) { inst[a].setAttribute('id', 'i' + [a + 1]);

//saves original text to an array for revert functionality
saveOriginal.push(inst[a].innerHTML);

    //split instance text into words
const instWords = inst[a].innerHTML.split(' '); //split into words by spaces
for (let i = 0; i < instWords.length; i++) {
    const word = document.createElement('span'); //word span
    //split instance text
    instWords[i] += " "; //add a space back since the delimeter is omitted
    const instChars = instWords[i].split('');
    for (let b = 0; b < instChars.length; b++) {
    //nest child span
    const span = document.createElement('span');
    word.appendChild(span);
    span.setAttribute('id', 'c' + [b + 1]);

    //check if child = char or whitespace
    if (instChars[b] == ' ') {
        span.classList.add('whtSpc');
    } else {
        span.classList.add('char');
    }

    //reveal init
    if (reveal == true) {
        //nest grandchild span
        const spanChild = document.createElement('span');
        spanChild.innerHTML = instChars[b]; //set text to grandchild span
        span.appendChild(spanChild);
        spanChild.setAttribute('id', 'r');
        spanChild.classList.add('reveal');
        //add charReveal styles
    } else {
        span.innerHTML = instChars[b]; //set text to child span
    }
    }
    word.style.display = 'inline-block'; //keep letter spans together; this trims space spans
    inst[a].appendChild(word);
    }
inst[a].removeChild(inst[a].childNodes[0]); // remove initial text input

}

//move element styling outside loops so it's done only once const char = document.querySelectorAll('.char'); for (let c = 0; c < char.length; c++) { char[c].style.display = 'inline-block'; char[c].style.overflow = 'hidden'; char[c].style.verticalAlign = 'top'; }

const whtSpc = document.querySelectorAll('.whtSpc'); for (let s = 0; s < whtSpc.length; s++) { whtSpc[s].style["white-space"] = 'pre'; //make space spans visible from trimming }

if (reveal == true) { const charReveal = document.querySelectorAll('.reveal'); for (let d = 0; d < charReveal.length; d++) { charReveal[d].style.display = 'inherit'; charReveal[d].style.overflow = 'inherit'; charReveal[d].style.verticalAlign = 'inherit'; } } //undo text splitting splt.revert = () => { for (let e = 0; e < inst.length; e++) { inst[e].removeAttribute('id'); inst[e].innerHTML = saveOriginal[e]; //sets text to original value } }; }

splt({ target:'.splt', reveal: false});`