logo标签列表

CSS如何防止span元素换行导致位置下移？

javascriptjqueryhtmlcss
4

我是新手，对JS、CSS和HTML不太熟悉，所以可能在处理这种情况时走了弯路。我正在练习制作终端，并遇到了以下问题。

我将提示符"> "放在下一个将接收文本的span之前，但当下一个span到达行尾时，整个span会向下移动而没有提示符。

例如：

> 文本文本文本....

变成

>

文本文本文本........................

我考虑添加一些JavaScript代码来防止"> "被删除（我想添加退格功能），但我想检查是否有更好的方法。

以下是我的代码：

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/

为什么不直接将 > 保留在同一个 span#appendhere 中呢？ - Guruprasad J Rao
3个回答
3
您应该将 #append 的 CSS 规则提升一级，因为我认为您希望其中的所有元素都表现出相同的行为。
此外，您需要删除 white-space: pre-wrap;，因为您不希望有任何空格。
我还添加了 word-break: break-all;，因为我认为您想要构建一个类似终端的界面。因此，所有字符都将填满屏幕，单词将被分开。
我在 #append-here 的父元素中添加了一个类 .line。
.line {
    word-wrap: break-word;
    display: inline-block;
    max-width: 100%;
    min-height: 2em;
    word-break: break-all;
}

无论如何，您应该使用HTML实体&gt;替换您的>文本，因为这会使您的HTML文档无效。要了解更多信息，请访问http://www.w3schools.com/html/html_entities.asp。如果您聪明，您会意识到您不能直接使用&作为文本，而是必须使用&amp;。 https://jsfiddle.net/danvim/dbncmzwb/3/
这正是它。谢谢你！！ - user4567587
2
如果你将inline-block改为inline，那么它就能正常工作了。只需更新你的JSFiddle即可：
#append-here {
   white-space: pre-wrap;
   word-wrap: break-word;
   display: inline;
   max-width: 100%;
   min-height: 2em;
}

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

0
只需更改您的CSS，它就可以工作：将inline-block更改为inline...
#append-here {
white-space: pre-wrap;
word-wrap: break-word;
display: inline;
max-width: 100%;
min-height: 2em;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接