Split a string in to pieces based on its pixels using Javascript

Question

I know that it's possible to split a string based on its length by number of characters. But how can I split an html string based on pixels without cutting words off?

For example :

myString = "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s";
splitThroughPixel(myString, 100) // Shall return something like ["Lorem Ipsum has", "been the industry's", "dummy text", "since the", "1500s"] (not the true splitting, just to give an idea)

splitThroughPixel(myString, 100) shall split myString into string pieces of 100px max each (without cutting words).

How can I achieve that ?

I'm already able to get the full pixel length of a string using this javascript method (if it can ever help) :

function getWidth(pText, pFontSize, pStyle) {
    var lDiv = document.createElement('div');

    document.body.appendChild(lDiv);

    if (pStyle != null) {
        lDiv.style = pStyle;
    }
    lDiv.style.fontSize = "" + pFontSize + "px";
    lDiv.style.position = "absolute";
    lDiv.style.left = -1000;
    lDiv.style.top = -1000;

    lDiv.innerHTML = pText;

    document.body.removeChild(lDiv);
    lDiv = null;

    return lDiv.clientWidth;
}

For example : getWidth(myString ) return 510 (which is the number of pixel on the screen of the string myString)

Thanks for taking time for helping me.

Answer 1

First of all, I made some corrections to your getWidth function because you return lDiv.clientWidth but you set lDiv to null right before, so it's going to throw an error. Therefore, I stored the .clientWidth into a variable, then returned it:

function getWidth(pText, pFontSize, pStyle) {

    var lDiv = document.createElement('div');

    document.body.appendChild(lDiv);

    if (pStyle != null) {
        lDiv.style = pStyle;
    }

    lDiv.style.fontSize = "" + pFontSize + "px";
    lDiv.style.position = "absolute";
    lDiv.style.left = -1000;
    lDiv.style.top = -1000;

    lDiv.innerHTML = pText;
        const width = lDiv.clientWidth;

    document.body.removeChild(lDiv);
    lDiv = null;

    return width;

}

Next, for your splitThroughPixel, you just have to loop through each words, get the pixels, and check if the sentence is greater than the width or not. If it's greater, add the previous string to the result.

function splitThroughPixel(string, width, size, style){

    const words = string.split(' ');
    const response = [];
    let current = '';

    for(let i=0; i<words.length; i++){

        const word = words[i];
        const temp = current + (current == '' ? '' : ' ') + word;

        if(getWidth(temp, size, style) > width){
            response.push(current.trim());
            current = '';
        }else{
            current = temp;
        }

    }

    return response;

}

Example

const myString = "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s";
console.log(splitThroughPixel(myString, 100, 14));

And the response of the example would be an array like this:

["Lorem Ipsum has", "the industry's", "dummy text ever"]

Demo

https://jsfiddle.net/ChinLeung/rqp1291r/2/