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

我正在尝试使div元素的工作方式与输入元素的工作方式类似。使DIV元素包含类似于输入元素的文本？

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

我想知道输入元件是如何实现滚动到一侧，而不必滚动条的能力？我不希望div元素扩展为多行来容纳内容，但我没有看到任何CSS属性控制输入元素上的这种行为。

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

来源

2012-10-04 Sean Anderson

你有没有尝试设置 “白色空间：NOWRAP;”在你的可编辑的里面，并设置一个固定的高度和溢出：隐藏;在你的包装？ – rafaelbiten

这里的答案：http://jsfiddle.net/MRP5M/12/

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

来源

2012-10-04 23:02:48 logan

使用此解决方案无法看到其余内容。 –

我刚刚在Chrome上试过。您必须使用箭头键才能查看其余内容，就像输入元素一样。 – logan

虽然我可以使用输入元素来突出显示并滚动查看其余内容。也许只是当时DIV元素的限制？ –

您可以设置“白色空间：NOWRAP;”在你的.editable div
之后，只需为你的#wrapper（类似于20px）和overflow：hidden;

这将工作，因为我只是试过。 “white-space：nowrap”将避免任何换行符，因此您无需在可编辑div中设置固定宽度。

更新：至于用鼠标选择所有文本的选项，Alohci在本文的评论中指出，您可以添加“overflow：auto;”到你可编辑的div，它会像通缉那样行事，至少在Chrome上，我刚刚尝试过。 Alohci还指出了小提琴。给他的信用。

来源

2012-10-04 23:06:14 rafaelbiten

似乎与Logans有相同的警告。看起来，输入元素的一些特征是由浏览器赋予的，不能在没有javascript的情况下被复制？ –

是的......据我所知，你将无法用DIV专用的解决方案达到目的...为什么不简单地使用另一个输入字段呢？ – rafaelbiten

是的。看起来我会像我的div元素那样设置输入元素的样式，而不是其他方式。在这一点上，只是将问题留在学习练习中。 –

输入字段的方面和行为是由浏览器本身控制的。您可以使用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; 
}

来源

2012-10-04 23:10:08 Zuul

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

回答

相关问题