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.

I really did not get your question, can you tell me more simple way — Dipak
– Dipak, Commented Feb 7, 2018 at 17:10
The fact is we used to split string based on the number of character. I want split string based on pixels (not character). Please is it clear ? — kabrice
– kabrice, Commented Feb 7, 2018 at 17:15
Possible duplicate of Determine Pixel Length of String in Javascript/jQuery? — Heretic Monkey
– Heretic Monkey, Commented Feb 7, 2018 at 17:22
@MikeMcCaughan it is not a dupe. Your post is about determining pixel, mine is about Splitting through pixel ! — kabrice
– kabrice, Commented Feb 7, 2018 at 17:59

Chin Leung · Accepted Answer · 2018-02-07 17:16:49Z

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/

Jorjon · Accepted Answer · 2018-02-07 17:40:44Z

1

Instead of creating and removing elements each loop as other answers suggested, which would be bad performance-wise, you can reuse the same element and add/reset the innerHTML, based on the current width.

function wrapText(text, maxWidth) {
    const words = text.split(' ');
  
    var el = document.createElement('div');
    document.body.appendChild(el);

    el.style.position = "absolute";
    let rows = [];
    let row = [];
    let usedIndex = 0;
    
    // loop through each word and check if clientWidth is surpassing maxWidth
    for(let i = 0; i < words.length; i++) {
      const word = words[i];
      el.innerHTML += word;
      if (el.clientWidth > maxWidth) {
        rows.push(el.innerHTML);
        usedIndex = i;
        el.innerHTML = "";
      } else {
        el.innerHTML += " ";
      }
    }
    
    // handle remaining words
    words.splice(0, usedIndex);
    rows = rows.concat(words.join(" "));
    
    document.body.removeChild(el);

    return rows;
}

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

p {
  position: relative;
}

p::before {
  outline: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100px;
  content: '';
}

edited Feb 7, 2018 at 17:40

answered Feb 7, 2018 at 17:25

Jorjon

5,4641 gold badge45 silver badges59 bronze badges

1 Comment

Rahul Dudharejiya Over a year ago

sorry I am asking too late but I need this. what if my string includes some html tags like span or p tag. then it is not calculating perfect for me

KevBot · Accepted Answer · 2018-02-07 17:34:42Z

You can create a temporary div that has white-space: nowrap and display: inline and add words to it, then test it's width.

This solution will not allow a substring to go beyond your pixel limit, unless one entire word goes beyond that pixel limit.

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

function splitThroughPixel(string, px) {
	let words = string.split(' ');
	let split = [];

	let div = document.createElement('div');
	div.style.cssText = 'white-space:nowrap; display:inline;';
	document.body.appendChild(div);

	for (let i = 0; i < words.length; i++) {
		div.innerText = (div.innerText + ' ' + words[i]).trim();
		let width = Math.ceil(div.getBoundingClientRect().width);
		if (width > px && div.innerText.split(' ').length > 1) {
			let currentWords = div.innerText.split(' ');
			let lastWord = currentWords.pop();
			split.push(currentWords.join(' '));
			div.innerText = lastWord;
		}
	}

	if (div.innerText !== '') {
		split.push(div.innerText);
	}

	document.body.removeChild(div);

	return split;
}

Collectives™ on Stack Overflow

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

3 Answers 3

Example

Demo

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Example

Demo

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related