Pre-format text to prevent overflow

Question

I wrote a fairly simple script that will accept elements (in this case, elements <p>are the main problem) and print their contents as a typewriter one after another.

The problem is that as it appears, when it reaches the edge of the intermediate word of the container, it processes the text and moves to the next line (for example, word wrap in any text editor).

This, of course, is the expected behavior; however, I would like to pre-format the text so that this does not happen.

I believe that inserting <br>before the word to be completed will be the best solution, but I'm not quite sure the best way to do this is to support all font sizes and container widths, as well as keeping any HTML tags intact.

I draw something with a hidden element <span>, adding text to it gradually, and checking its width to the width of the container may be on the right track, but I'm not quite sure how to actually put it together. Any help or suggestions on best practices would be appreciated.

---

Edit

I managed to write something like this using jQuery, although it is very messy and, more importantly, sometimes it seems that they miss words, and I cannot understand why. #content is the name of the container, and #ruler is the name of the hidden one <span>. I am sure there is a much better way to do this.

function formatText(html) {
    var textArray = html.split(" ");
    var assembledLine = "";
    var finalArray = new Array();
    var lastI = 0;
    var firstLine = true;
    for(i = 0; i <= textArray.length; i++) {
        assembledLine = assembledLine + " " + textArray[i];
        $('#ruler').html(assembledLine);
        var lineWidth = $('#ruler').width();
        if ((lineWidth >= $('#content').width()) || (i == textArray.length)) {                  
            if (firstLine) { var tempArray = textArray.slice(lastI, i); }
            else { var tempArray = textArray.slice(lastI+1, i); }
            var finalLine = tempArray.join(" ");
            finalArray.push(finalLine);
            assembledLine = "";
            if (lineWidth > $('#content').width()) { i = i-1; }
            lastI = i;
            firstLine = false;
        }
    }
    return finalArray.join("<br>");
}

Answer 1

After playing with the code that I edited in the question, I managed to get it to work decently.

Code

function formatText(html) {
    var textArray = html.split(" ");
    var assembledLine = "";
    var finalArray = new Array();
    var lastI = 0;
    var firstLine = true;
    for(i = 0; i <= textArray.length; i++) {
        assembledLine = assembledLine + " " + textArray[i];
        $('#ruler').html(assembledLine);
        var lineWidth = $('#ruler').width();
        if ((lineWidth >= $('#content').width()) || (i == textArray.length)) {                  
            if (firstLine) { var tempArray = textArray.slice(lastI, i); }
            else { var tempArray = textArray.slice(lastI+1, i); }
            var finalLine = tempArray.join(" ");
            finalArray.push(finalLine);
            assembledLine = "";
            if (lineWidth >= $('#content').width()) { i = i-1; }
            lastI = i;
            firstLine = false;
        }
    }
    return finalArray.join("<br>");
}

Not perfect, but it will be done. Thank you all.

Answer 2

You can use pre tag:

Which displays pre-formatted text,

or you can put the content in a div tag, set a fixed width and a script based on this.

Answer 3

() - , "". :

H<span style="visibility: hidden;">ello</span>

He<span style="visibility: hidden;">llo</span>

Hel<span style="visibility: hidden;">lo</span>

Hell<span style="visibility: hidden;">o</span>

Hello

, span DOM .

Answer 4

p ( p , 1 ), , ' . < > px (, 25px), , p , <br />

, ...