Javascript CSS防止跨度向下移动到新线_Javascript_Jquery_Html_Css

Javascript CSS防止跨度向下移动到新线

javascript jquery html css

Javascript CSS防止跨度向下移动到新线,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我不熟悉JS、CSS、HTML，所以我可能会以错误的方式处理这种情况，但我正在尝试制作一个终端以供练习，我遇到了以下问题在接收文本的下一个跨距之前的一个跨距中有我的提示符“>”，但当下一个跨距到达行尾时，整个跨距将向下移动，而不显示提示符前 >文本文本文本到 > 正文我想添加一些js来防止“>”被删除（我想添加退格功能），但我想看看是否有更好的方法以下是我目前的代码： HTML <body> <div> <span>> </s

我不熟悉JS、CSS、HTML，所以我可能会以错误的方式处理这种情况，但我正在尝试制作一个终端以供练习，我遇到了以下问题

在接收文本的下一个跨距之前的一个跨距中有我的提示符“>”，但当下一个跨距到达行尾时，整个跨距将向下移动，而不显示提示符

前

>文本文本文本

到

正文

我想添加一些js来防止“>”被删除（我想添加退格功能），但我想看看是否有更好的方法

以下是我目前的代码：

HTML
<body>
  <div>
    <span>> </span>
    <span id="append-here"> text </span>
    <textarea id="text"></textarea>
  </div>
</body>

CSS
#append-here {
    white-space: pre-wrap;
    word-wrap: break-word;
    display: inline-block;
    max-width: 100%;
    min-height: 2em;
}

textarea {
  width: 20px;
  color: black;
  height: 1em;
  width: .8em;
  resize: none;
  overflow: hidden;
}

JS
    $("#text").bind("keydown", function Append_Key(e) {
  $("#append-here").append(String.fromCharCode(e.keyCode).toLowerCase());
});

HTML
> 
正文
CSS
#在此追加{
空白：预包装；
单词包装：打断单词；
显示：内联块；
最大宽度：100%；
最小高度：2米；
}
文本区{
宽度：20px；
颜色：黑色；
高度：1米；
宽度：.8em；
调整大小：无；
溢出：隐藏；
}
JS
$（“#text”）.bind（“keydown”，函数追加#u键（e）{
$（“#在此追加”）.append（String.fromCharCode（e.keyCode.toLowerCase（））；
});

和jsfiddle:

如果您将inline块更改为inline，那么它将工作。刚刚更新了您的JSFIDLE：

#append-here {
   white-space: pre-wrap;
   word-wrap: break-word;
   display: inline;
   max-width: 100%;
   min-height: 2em;
}

您应该将

#append

的CSS规则向上移动一个级别，因为我假设您希望其中的所有元素都以相同的方式运行

此外，您还需要删除

空白：预换行因为您不需要任何空间
我还添加了单词break:breakall
我在#append here

.line {
    word-wrap: break-word;
    display: inline-block;
    max-width: 100%;
    min-height: 2em;
    word-break: break-all;
}

无论如何，您应该使用HTML实体
替换
文本，因为这会使HTML文档无效。要阅读更多内容，如果你很聪明，你会意识到你不能直接使用&
作为文本，但你必须使用&
只要更改css，它就会工作：从内联块到内联块
#append-here {
white-space: pre-wrap;
word-wrap: break-word;
display: inline;
max-width: 100%;
min-height: 2em;
}

你为什么不干脆把
放在同一个span#appendhere
中呢？就是这样。非常感谢。