Css 溢出将文本环绕div，而不是滚动

复制步骤：

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

1：去

2：点击“存储”按钮

3：点击“执行”按钮

4：开始打字

应该发生什么：

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

• 黑色接线盒的作用类似于文本输出。按“回车”键创建新行。如果未按enter键，文本应保持在一行上，并创建滚动条溢出

一只敏捷的棕色狐狸。。。跳过了懒惰的狗（所有这些溢出的滚动条）
2

实际发生的情况：

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

• 黑色接线盒不会产生x溢出，如果您键入大量，则会强制换行

敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗越过那只懒狗
2

我尝试过的：

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

发生了什么：

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

每次按下按键时，

document.getElementByID（“终端”）.innerHTML+=按键

，除非按下enter键，否则此时

document.getElementByID（“终端”）.innerHTML+=“
”

我如何用CSS解决这个问题？完整代码在

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

#终端{溢出：滚动；背景颜色：灰色；宽度：100px；高度：100px；}
敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗敏捷的棕色狐狸跳过了懒狗懒惰的狗

将此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 */
}

.wordwrap{
空白：预换行；/*CSS3*/
空白：-moz预包装；/*Firefox*/
空白：-pre-wrap；/*Opera将此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 */
}

.wordwrap{
空白：预换行；/*CSS3*/
空白：-moz预包装；/*Firefox*/
空白：-pre-wrap；/*Opera我尝试添加这个，它似乎对我有效

#terminal {
   white-space: nowrap;
}

我试着添加这个，它似乎对我有效

#terminal {
   white-space: nowrap;
}

最好是代码的最小部分（但完整，涵盖整个问题），以便帮助者可以使用它并进行测试；此github项目太大，无法检查。我将尝试添加更多可能有用的细节。最好是最小部分（但完整，涵盖整个问题）这是代码的一部分，帮助者可以使用它并进行测试；此github项目太大，无法检查。我将尝试添加更多可能有用的详细信息。是否有理由这样做会比
空白：nowrap
？nowrap：像正常情况一样折叠空白，但抑制换行（文本换行）在文本中。预换行：保留空格序列。换行符处、换行符处、换行框中的换行符处以及填充换行框所需的换行符处都会断开。没关系！选择所需内容：）有什么原因比空白：nowrap
更好吗？nowrap：按正常方式折叠空格，但抑制换行文本中的换行符（文本换行）。预换行：保留空格序列。换行符、换行符、换行符以及填充行框所需的换行符都会换行。。没关系！选择所需内容：）