Proof

Question

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

我正在使用type()来创建打字机效果（每个字符都打印在屏幕上，两者之间有延迟）。我使用addTextToScreen(textForScreen)将文本添加到队列中，然后通过type()将其添加到屏幕中。当我在JavaScript中调用addTextToScreen()时，文本似乎被格式化，因为它不会在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。

Answer 2

您缺少的神奇CSS规则是word-break: break-all;。添加它，它就像你期望的那样工作。

溢出的输入文本

2 个答案:

JS Fiddle Demo

Proof