I would like to have a title element with overflow-x:hidden and overflow-y:visible. However, for some reason the overflow-y property does not seem to be obeyed. You can observe this here (tested on Chrome and Firefox):
http://jsfiddle.net/YgsAw/3/
In that demo, I expect to see "jjjjj", but instead the j's are cut off and look more like 1's.
If I set overflow-x:visible on the h1 tag then suddenly the full height of the text is visible, but setting overflow-x:hidden makes it clipped. I would expect this behavior from overflow-y, but that seems to have no effect. Why is this, and what can I do about it?
I found some answers in a previous question. According to the specs:
The computed values of
overflow-xandoverflow-yare the same as their specified values, except that some combinations withvisibleare not possible: if one is specified asvisibleand the other isscrollorauto, thenvisibleis set toauto. The computed value ofoverflowis equal to the computed value ofoverflow-xifoverflow-yis the same; otherwise it is the pair of computed values ofoverflow-xandoverflow-y.
Furthermore, on this page the author mentions that many browsers impose additional restrictions:
In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’).
That same page also provides demos for all possible combinations where this effect can be observed.
I am not aware of a viable workaround for my situation.
EDIT
I'm pretty sure I can do what I want by nesting my title tag in another tag: <div><h1>title</h1></div>. The inner h1 has line-height:normal to make everything vertically visible, as well as overflow:hidden to make it truncate. The outer element can have a strictly limited height and overflow:visible. It's not ideal, but it seems like the best option.