CODEWITHSUNDEEP
javascripttextword-wrap
D3 K
D3 K

Reputation: 682

How to wrap text in JavaScript?

I have text in a div with each character of my text enclosed in span tag:

Text = A quick brown fox jumps

<div id="span_text">
<span>A</span><span>&nbsp;</span><span>q</span><span>u</span><span>i</span><span>c</span><span>k</span><span>&nbsp;</span><span>b</span><span>r</span><span>o</span><span>n</span><span>&nbsp;</span><span>f</span><span>o</span><span>x</span><span>&nbsp;</span><span>j</span><span>u</span><span>m</span><span>p</span><span>s</span>
</div>

The problem is that the words do not wrap around since each character is enclosed in span tag. Is there any way to wrap text like in MS Word and other editors while having characters enclosed in span ???

Why do I need to enclose each character in span? Actually I am making a basic typing tutor. Whenever a key is pressed, I have to:

  1. Highlight the character in Gray if valid character was typed.
  2. Highlight the character in Red if wrong character was typed.
  3. Highlight the next character to type is Green.

So to target each character, I have to enclose them in span and give each span unique ID to select them via jQuery.

Upvotes: 0

Views: 5611

Answers (5)

Ashutosh Pathak
Ashutosh Pathak

Reputation: 77

function GetWrapedText(text, maxlength) {    
    var resultText = [""];
    var len = text.length;    
    if (maxlength >= len) {
        return text;
    }
    else {
        var totalStrCount = parseInt(len / maxlength);
        if (len % maxlength != 0) {
            totalStrCount++
        }

        for (var i = 0; i < totalStrCount; i++) {
            if (i == totalStrCount - 1) {
                resultText.push(text);
            }
            else {
                var strPiece = text.substring(0, maxlength - 1);
                resultText.push(strPiece);
                resultText.push("<br>");
                text = text.substring(maxlength - 1, text.length);
            }
        }
    }
    return resultText.join("");
}

Upvotes: 1

D3 K
D3 K

Reputation: 682

After reviewing the comments, I finally made it without enclosing each character in "span" tag. I have made two spans. One for typed characters and other for current character. On each keyup event, I update the div content by replacing the current HTML with updated HTML. Below is the basic logic I am using:

var Text = "The quick brown fox jumps over the lazy dog. It was dark and quiet in the room.";
var ChTyped = 0; // Number of characters typed so far

function update(){
  var StringTyped = Text.substr(0, ChTyped);
  var StringCurrent = '<span class="l-active">' + Text.substr(ChTyped, 1) + '</span>';
  var StringRemaining = Text.substr(ChTyped+1);
}

$("#typingbox").on('keyup', function(e){
  ChTyped++;
  update();
});

Thank you all...

Upvotes: 0

austincheney
austincheney

Reputation: 1115

Try this:

(function () {
    var a = document.getElementById("span_text");
    a.innerHTML = a.innerHTML.replace(/<\/span><span>/g, "\n").replace(/<\/?span>/g, "");
    a.style.whiteSpace = "pre";
    a.style.width = "1.5em";
    a.style.overflow = "scroll";
}());

Upvotes: 0

danludwig
danludwig

Reputation: 47375

Is the <span>&nbsp;</span> really necessary?

If you can just avoid wrapping that 1 character in a span, it should wrap just fine. I can't imagine why you would need to style a non breaking space, or access it with javascript. If you do, why?

The other characters are fine inside the spans, but I think you can move the &nbsp; out and not have it wrapped in a span.

Upvotes: 2

Fabi&#225;n Heredia Montiel
Fabi&#225;n Heredia Montiel

Reputation: 1687

Get them out of the div if they don't need to be in there?

Put whatever you want to wrap around inside the div?

Upvotes: 0

Related Questions