admin管理员组

文章数量:1302544

I'm new to JS, CSS, HTML, so I may be going about this situation in the wrong way, but I'm trying to make a terminal for practice, and I ran into the following problem.

I have my prompt "> " in a span before the next one that'll receive text, but when the next one reaches the end of the line, the entire span moves down without the prompt.

ex.

> text text text ....

to

>

text text text ........................

I thought about adding some js to prevent the "> " from being erased (I want to add in backspace functionality), but I wanted to check if there's a better way.

Here's my code so far:

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

And jsfiddle: /

I'm new to JS, CSS, HTML, so I may be going about this situation in the wrong way, but I'm trying to make a terminal for practice, and I ran into the following problem.

I have my prompt "> " in a span before the next one that'll receive text, but when the next one reaches the end of the line, the entire span moves down without the prompt.

ex.

> text text text ....

to

>

text text text ........................

I thought about adding some js to prevent the "> " from being erased (I want to add in backspace functionality), but I wanted to check if there's a better way.

Here's my code so far:

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

And jsfiddle: https://jsfiddle/dbncmzwb/

  • javascript
  • jquery
  • html
  • css
Share Improve this question edited Feb 15, 2016 at 7:34 user4567587 asked Feb 15, 2016 at 7:25 user4567587user4567587 531 gold badge1 silver badge4 bronze badges 1
  • why don't you simply keep > in the same span#appendhere? – Guruprasad J Rao Commented Feb 15, 2016 at 7:34
Add a ment  | 

3 Answers 3

Reset to default 3

You should move the CSS rules of #append up a level, because I assume you want all the elements within to behave in the same way.

Also, you need to remove white-space: pre-wrap; because you don't want any space.

I've also added word-break: break-all; because I assume you want to build it to emulate a terminal. So all characters will fill the screen and words will get separated.

I put a class .line in the parent of #append-here

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

Anyway, you should use the HTML entity &gt; to replace your > text because it would make your HTML document invalid. To read more, http://www.w3schools./html/html_entities.asp If you are clever, you would realize that you cannot use & as text directly, but you have to use &amp;

https://jsfiddle/danvim/dbncmzwb/3/

If you change inline-block to inline, then it will work. Just updated your JSFiddle:

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

https://jsfiddle/dbncmzwb/1/

Just change your css and it will work: inline-block to inline...

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

本文标签： javascriptCSS prevent span from moving down to new lineStack Overflow

版权声明：本文标题：javascript - CSS prevent span from moving down to new line - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741687316a2392516.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。