Words are breaking sometimes
joelalexandersson opened this issue · comments
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.
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!
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});`