Overflowing input text

Question

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.

Could you post enough code for us to reproduce the problem? We don't know what `text` and `typeTime` are, and we don't have your HTML code. Posting a [JS Fiddle](http://jsfiddle.net) demo would be best. — blex, Mar 02 '15 at 18:43
@blex typeTime is irrelevant to my question, however I have added it in now. — Cj1m, Mar 02 '15 at 18:51
I would recommend truncating the line...that's the easiest solution to your problem. You'll lose data but it solves your issue. — user1789573, Mar 02 '15 at 19:02
@blex I have now also added a jsfiddle demo, hope this helps :) — Cj1m, Mar 02 '15 at 19:05
It's not overflowing for me. Perhaps your input is a long string with no spaces (e.g., `eeeeeeeeeeeeeeeeeeeeeee`), which would not wrap. However, you'll notice that that will happen whether you do it programmatically (like your example text) or through the UI. So, as a test, paste you current test text (`HELLO there, as you can see...`) in the UI and hit enter, and you'll see it works as expected — Tom, Mar 02 '15 at 19:09

score 3 · Accepted Answer · edited May 23 '17 at 11:50

3

Add this css property to #paraText:

word-wrap:break-word;

JS Fiddle Demo

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

edited May 23 '17 at 11:50

Community

1
1

answered Mar 02 '15 at 19:13

blex

24,941
5
39
72

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

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

Proof

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 02 '15 at 19:16

Josh Burgess

9,327
33
46

Overflowing input text

2 Answers2

JS Fiddle Demo

Proof