Question

我是JS，CSS，HTML的新手，所以我可能会以错误的方式处理这种情况，但是我试图建立一个练习终端，我遇到了以下问题

我有提示＆＃34;＆gt; ＆＃34;在下一个接收文本之前的一个范围内，但当下一个文本到达行尾时，整个范围向下移动而没有提示。

离。

＆GT;文本文本文本....

到

＆GT;

文字文字........................

我考虑添加一些j来防止＆＃34;＆gt; ＆＃34;从被删除（我想添加退格功能），但我想检查是否有更好的方法。

到目前为止，这是我的代码：

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());
});

并且jsfiddle：https://jsfiddle.net/dbncmzwb/

Answer 1

如果您将内联块更改为内联，那么它将起作用。刚刚更新了你的JSFiddle：

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

https://jsfiddle.net/dbncmzwb/1/

Answer 2

你应该将#append的CSS规则向上移动一个级别，因为我假设你希望其中的所有元素以相同的方式运行。

此外，您需要删除white-space: pre-wrap;，因为您不需要任何空格。

我还添加了word-break: break-all;，因为我假设您要构建它以模拟终端。因此，所有字符都将填满屏幕，单词将被分开。

我将一个班级.line放在#append-here

的父级中

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

无论如何，您应该使用HTML实体>替换>文本，因为它会使您的HTML文档无效。要了解更多信息，http://www.w3schools.com/html/html_entities.asp如果您很聪明，您会发现自己无法直接使用&作为文字，但必须使用&

https://jsfiddle.net/danvim/dbncmzwb/3/

Answer 3

只需更改你的css就可以了：内联块内联......

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

CSS阻止跨度向下移动到新行

3 个答案: