Question

重现的步骤：

1：转到http://schultheiss.io/lc3-sim

2：点击＆＃34; STORE＆＃34;按钮

3：点击＆＃34; EXECUTE＆＃34;按钮

4：开始输入

应该发生什么：

黑色接线盒的作用类似于文本输出。按下＆＃34;输入＆＃34;击键创建一个新线。如果输入未被按下，则文本应保持在一行并创建滚动条溢出。

1快速的棕色狐狸......跳过懒狗（所有这些溢出的滚动条）
2

实际发生的事情：

黑色接线盒不会产生x溢出，如果你输入很多，它会强行换行。

快速的棕色狐狸跳过懒狗快速的棕色狐狸跳过懒狗快速的棕色狐狸跳过懒狗快速的棕色狐狸跳过懒狗快速的棕色狐狸跳过懒狗快速的棕色狐狸跳过懒狗快速的棕色狐狸跳过懒狗快速的棕色狐狸跳过懒狗2

我尝试了什么：

#terminal {
    ...
    overflow: scroll;
    text-overflow: scroll; /* ? */
    ...
}

发生了什么：

每按一次键击document.getElementByID("terminal").innerHTML += keystroke，除非按下输入，然后document.getElementByID("terminal").innerHTML += "<br>"

如何使用CSS修复此问题？ https://github.com/jschlth2/web-lc3

的完整代码

编辑：我将其简化为下面HTML代码中的示例。如果你运行代码，你会看到它溢出但是没有溢出-x。

＆＃13;

<html>
  <head>
    <style>
    #terminal{ overflow: scroll; background-color: grey; width: 100px; height: 100px;}
    </style>
  </head>
  <body>
    <div id="terminal">
      1 The quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog the quick brown fox jumped over the lazy dog<br>2
    </div>
  </body>
</html>

＆＃13;

Answer 1

我尝试添加它，它似乎对我有用。

#terminal {
   white-space: nowrap;
}

Answer 2

将此CSS添加到DIV类：

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

SEE DEMO

溢出包围div而不是滚动文本

2 个答案: