div中输入和标签之间的行为差​​异

时间:2015-03-06 18:17:24

标签: html css

好的,所以标题不是最好的,但我想不出一个总结我的问题的简单方法......所以这里就是。

我有一个输入类型的文本(内联块元素 - >或至少是浏览器设置的那个),并且我在div(块)中有一个标签(内联)。

问题是基于文本溢出:省略号。我发现在输入中放置特征的行为与持有标签的div之间存在一些差异。根据规格,它说你必须有一个不可见的溢出。我不需要在输入上有这个。我的问题只是...... .WHY?我不喜欢当事情的行为与我预期的不同而不知道为什么(我不会因为面值而拿东西......我需要知道细节。我在这里有一个示例代码片段来说明我的意思。

http://www.cssdesk.com/hYgpy

这是一个俗气的例子,但我需要简单的测试它。如果你删除溢出:隐藏div ...省略号不再起作用......但它根本不需要输入.....为什么,为什么,为什么把自己跪在地上......尖叫在天堂

:)提前感谢

1 个答案:

答案 0 :(得分:1)

好吧,我实际上害怕将这个作为答案发布,因为我无法用文档来支持这一点,但我会尝试分享一些启示。

HTML输入控件(例如input select textarea)具有用户代理定义的行为,在某些方面似乎可能违反我们在其他元素中看到的常见属性。

例如,输入字段具有内置溢出,旨在防止键入的文本扩展元素。它自然地由它的-prefix-appearance属性应用,你无法改变它。尝试强制overflow: visible;输入,并看到您不会显示溢出的文本。

<input type="text" style="overflow:visible;width: 70px;" value="This text is not entirely visible" />

因此,text-overflow: ellipsis将在这种元素上起作用,因为它的溢出的内部隐藏行为是自然隐含的。