CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4567587
user4567587

Reputation: 53

CSS prevent span from moving down to new line

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.net/dbncmzwb/

Upvotes: 4

Views: 13601

Answers (3)

Daniel Cheung
Daniel Cheung

Reputation: 4819

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.com/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.net/danvim/dbncmzwb/3/

Upvotes: 3

Sumanta736
Sumanta736

Reputation: 705

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

Upvotes: 0

Bluesight
Bluesight

Reputation: 754

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.net/dbncmzwb/1/

Upvotes: 2

Related Questions