3

我正在尝试使 div 元素的工作方式与输入元素的工作方式类似。

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

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

更新：所有好的解决方案。谢谢你们调查它。看起来输入元素的某些方面是由浏览器控制的（即高亮滚动）。如果不使用 Javascript，似乎很难模拟此功能。我已将第一个响应标记为解决方案。

4

3 回答 3

3

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

有一个警告：我不确定如何禁止新行....

于 2012-10-04T23:02:48.783 回答
2
  1. 您可以设置“空白：nowrap;” 在您的 .editable div 中
  2. 之后，只需为您的#wrapper 设置一个固定高度（大约 20 像素）并溢出：隐藏；

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

更新：至于用鼠标选择所有文本的选项，Alohci 刚刚在这篇文章的评论中指出，您可以添加“溢出：自动；” 到您的 .editable div ，它会按需要运行，至少在我刚刚尝试过的 Chrome 上。Alohci 还指了指小提琴。归功于他。

于 2012-10-04T23:06:14.300 回答
1

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

请参阅这个工作小提琴示例！

.editable {
   white-space: nowrap;
}

至于不使用滚动条的滚动，您只能通过使用 JavaScript 或将 HTML 更改为input伪装成div:

请参阅这个工作小提琴示例！

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-04T23:10:08.370 回答