javascript - 溢出输入文本

Question

这是 JSFiddle 演示:http://jsfiddle.net/qox0yxb4/

我正在使用 type()创建打字机效果(每个字符都打印在屏幕上，中间有延迟)。我用 addTextToScreen(textForScreen)将文本添加到队列，然后通过 type() 添加到屏幕.当我调用 addTextToScreen()在 JavaScript 中，文本似乎被格式化，因为它不会在 x 轴上溢出，但是当我接受来自 HTML 的输入时 <input>标记 ( printText() )，文本在 x 轴上溢出。

这是 JavaScript 方法:

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 = "";
   }
}

我还注意到，每当我将文本粘贴到输入框(文本可以来自任何地方)时，它似乎是格式化的，并且不会溢出。

Answer 1

将此 css 属性添加到 #paraText:

word-wrap:break-word;

JS Fiddle Demo

Josh建议使用 break-all, here is the difference .