Question

我试图让div元素与input元素的工作方式类似。

http://jsfiddle.net/MRP5M/6/

我想知道输入元素如何在不使用滚动条的情况下滚动到侧面的能力？我不希望我的div元素扩展到多行来保存内容，但我没有看到任何CSS属性控制输入元素上的这种行为。

更新：所有好的解决方案。谢谢你们调查一下。看起来输入元素的某些方面是由浏览器控制的（即突出显示到滚动）。在不使用Javascript的情况下模拟此功能似乎很困难。我已将第一个响应标记为解决方案。

Answer 1

以下是答案：http://jsfiddle.net/MRP5M/12/

有一点需要注意：我不确定如何禁止新线......

Answer 2

你可以设置“white-space：nowrap;”在你的.editable div中
之后，只需为#wrapper（类似20px）设置一个固定高度，然后溢出：隐藏;

它会像我刚试过的那样奏效。 “white-space：nowrap”将避免任何换行符，因此您无需在.editable div中设置固定宽度。

更新：至于用鼠标选择所有文本的选项，Alohci刚刚在帖子的评论中指出你可以添加“overflow：auto;”对你的.editable div而言，它会表现得像所希望的那样，至少在我刚试过的Chrome上。阿洛赫也指出了一个小提琴。归功于他。

Answer 3

输入字段方面和行为由浏览器本身控制。您可以使用CSS来防止文本破坏：

请参阅此working Fiddle example！

.editable {
   white-space: nowrap;
}

对于不使用滚动条滚动，您只能通过使用JavaScript或更改HTML来实现input伪装成div：

请参阅此working Fiddle example！

<强> HTML

<div id="wrapper">
   <input type="text" value="A really long string of content" />
</div>
<input type="text" value="A really long string of content" />

<强> CSS

#wrapper{
   width: 151px;
}

#wrapper > input {
   border: 0 none;
   background-color: white,
   color: black;
}

使DIV元素包含类似于输入元素的文本？

3 个答案: