CODEWITHSUNDEEP
javascripthtmlcss
Cj1m
Cj1m

Reputation: 815

Overflowing input text

Here is the JSFiddle demo: http://jsfiddle.net/qox0yxb4/

I am using type() to create a typewriter affect (each character is printed on the screen with a delay in between). I use addTextToScreen(textForScreen) to add text to the queue which is then added to the screen through type(). When I call addTextToScreen() from within the JavaScript, the text seems to be formatted as it does NOT overflow on the x-axis, however when I accept input from an HTML <input> tag (printText()), the text overflows on the x-axis.

Here are the JavaScript methods:

var i = 0,
isTag=false,
text;

var typeTime = 45;

function type() {
    if (text === textOnScreen){
      setTimeout(function(){type();}, typeTime);
      return;
    }
    text = textOnScreen.slice(0, i+1);
    i++;
    document.getElementById('paraText').innerHTML = text;

    var char = text.slice(-1);
    console.log(char);
    if( char === '<' ) isTag = true;
    if( char === '>' ) isTag = false;

    if (isTag) return type();

    setTimeout(function(){type();}, typeTime);
}

function addTextToScreen(textForScreen){
    textOnScreen = textOnScreen + textForScreen;
}

type();

function printText(event) {
   if(event.keyCode == 13){
        printText = document.getElementById("inputText").value.toString();
        addTextToScreen("<br>" + printText.toString());
        x = document.getElementById("inputText");
        x.value = "";
   }
}

I also noticed that whenever I paste text into the input box (the text can be from anywhere) it seems to be formatted, and it does NOT overflow.

Upvotes: 0

Views: 158

Answers (2)

Josh Burgess
Josh Burgess

Reputation: 9567

The magic CSS rule you're missing is word-break: break-all;. Add that, and it works just like you'd expect.

Proof

Upvotes: 1

blex
blex

Reputation: 25659

Add this css property to #paraText:

word-wrap:break-word;

JS Fiddle Demo

Josh suggested using break-all, here is the difference.

Upvotes: 3

Related Questions