CODEWITHSUNDEEP
htmlcss
carinlynchin
carinlynchin

Reputation: 389

Differences in behavior between input and label in div

Ok, so the title isn't the best but I couldn't think of a simple way to summarize my question.... so here goes.

I have an input type of text (inline-block element--> or at least that is what the browser sets it as) and i have a label(inline) within a div(block).

The question is based on doing a text-overflow: ellipsis. I found some differences between the behavior of placing the traits in the input vs the div holding the label. Based on specs it says that you HAVE to have an overflow that isn't visible. I wasn't required to have that on the input. My question is just... .WHY? I don't like when things behave differently than I expect and not knowing the why's (I dont' take things for face value... i need to know the details. I have a sample snippet of code here to show what I mean.

http://www.cssdesk.com/hYgpy

Its a cheesy example but I needed simplicity for testing it. If you remove the overflow: hidden from div...the ellipsis doesn't work anymore...but its not required for input at all.....why, whyyyyy throwing herself on her knees...screaming at the heavens

:) thanks in advance

Upvotes: 0

Views: 76

Answers (1)

LcSalazar
LcSalazar

Reputation: 16841

Well, I'm actually afraid of posting this as an answer, as I can't back this up with documentation, but I'll try to share some enlightenment.

HTML input controls (such as input select textarea) have user agent's defined behaviors, that in some ways may seem to defy the common properties we see in other elements.

The input field for example, has a built-in overflow, designed to keep the typed text from expanding the element. It is naturally applied by it's -prefix-appearance property, and you can't change it. Try forcing an overflow: visible; to the input, and see that you won't show the overflowed text. 

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

Therefore, the text-overflow: ellipsis will work at this kind of element, since the inner hidden behavior of it's overflow is naturallly implied to it.

Upvotes: 1

Related Questions