¿Por qué overflow-x: clip oculto mis descendientes?

Question

Me gustaría tener un elemento de título con overflow-x:hidden y overflow-y:visible. Sin embargo, por alguna razón, la propiedad overflow-y no parece obedecerse. Se puede observar esto aquí (probado en Chrome y Firefox): http://jsfiddle.net/YgsAw/3/

En esa demo, espero ver "jjjjj", pero en lugar de la j se cortan y parezco más a 1s.

Si establezco overflow-x:visible en la etiqueta h1, de repente aparece el alto completo del texto, pero el ajuste overflow-x:hidden lo hace recortado. Esperaría este comportamiento de overflow-y, pero eso parece no tener ningún efecto. ¿Por qué es esto y qué puedo hacer al respecto?

Answer 1

Encontré algunas respuestas en un previous question. Según the specs:

Los valores calculados de overflow-x y overflow-y son los mismos que sus valores especificados, excepto que algunas combinaciones con visible no son posibles: si se especifica como visible y el otro es scroll o auto, entonces visible se establece en auto. El valor calculado de overflow es igual al valor calculado de overflow-x si overflow-y es el mismo; de lo contrario, es el par de valores calculados de overflow-x y overflow-y.

Por otra parte, en this page el autor menciona que muchos navegadores imponen restricciones adicionales:

En Gecko, Safari, Opera, 'visible' se convierte en 'auto' también cuando se combina con 'oculta' (en otra palabras: 'visible' se convierte en 'auto' cuando se combina con cualquier cosa diferente de 'visible').

Esa misma página también proporciona demostraciones para todas las combinaciones posibles donde se puede observar este efecto.

No conozco una solución viable para mi situación.

EDITAR

Estoy bastante seguro de que puedo hacer lo que quiero anidando mi etiqueta del título en otra etiqueta: <div><h1>title</h1></div>. El interior h1 tiene line-height:normal para hacer que todo sea visible verticalmente, así como overflow:hidden para hacerlo truncar. El elemento externo puede tener una altura estrictamente limitada y overflow:visible. No es ideal, pero parece ser la mejor opción.

Answer 2

Parece cambiar el elemento H1 en un elemento en línea le conseguirá los resultados deseados:

h1 { 
    margin: 10px; 
    padding: 0;   
    overflow-x: hidden; 
    overflow-y: visible; 
    line-height: 0.5em; 
    display:inline; 
} 

Sólo asegúrese de que el siguiente elemento es un elemento de bloque por lo que no se inicia en la misma línea. Eso o usa la altura de línea correcta y luego usa márgenes negativos. Después de todo, solo puedo adivinar lo que intentas hacer ... ¡Buena suerte!