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
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: . The inner title
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.