How to wrap text in JavaScript?

Question

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:

Highlight the character in Gray if valid character was typed.
Highlight the character in Red if wrong character was typed.
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.

What are you doing that requires each letter be in a span? There could be better workarounds. — Mouse Food
– Mouse Food, Commented Dec 13, 2011 at 20:06
"Mouse Food", I have updated my question and explain the reason why I am enclosing each character in span tag. — D3 K
– D3 K, Commented Dec 14, 2011 at 3:18
I agree with Mouse Food, there should be a better way to do this. For example, the characters that were already typed -- those don't need to go in individual spans, right? Just the current and next characters need to have different styles applied. Right? — danludwig
– danludwig, Commented Dec 14, 2011 at 4:33
I thought about your way but it didn't work. I'll try again and put update here. Thanks — D3 K
– D3 K, Commented Dec 14, 2011 at 5:12

danludwig · Accepted Answer · 2011-12-13 20:10:38Z

2

Is the <span> </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   out and not have it wrapped in a span.

answered Dec 13, 2011 at 20:10

danludwig

47.3k27 gold badges164 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D3 K Over a year ago

Hi "alivehour", I've just updated my question explaining the reason why I am enclosing each character in span.

Ashutosh Pathak · Accepted Answer · 2013-02-06 14:17:39Z

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("");
}

Fabián Heredia Montiel · Accepted Answer · 2011-12-13 20:05:33Z

0

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?

answered Dec 13, 2011 at 20:05

Fabián Heredia Montiel

1,6871 gold badge16 silver badges31 bronze badges

Comments

austincheney · Accepted Answer · 2011-12-13 20:11:39Z

0

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";
}());

answered Dec 13, 2011 at 20:11

austincheney

1,1157 silver badges8 bronze badges

Comments

D3 K · Accepted Answer · 2011-12-14 07:32:01Z

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...

Collectives™ on Stack Overflow

How to wrap text in JavaScript?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related