Tại sao tràn-x: clip ẩn hậu duệ của tôi?

Question

Tôi muốn có một phần tử tiêu đề với overflow-x:hidden và overflow-y:visible. Tuy nhiên, vì lý do nào đó, thuộc tính overflow-y dường như không được tuân theo. Bạn có thể quan sát này đây (thử nghiệm trên Chrome và Firefox): http://jsfiddle.net/YgsAw/3/

Trong bản demo đó, tôi mong đợi để xem "jjjjj", nhưng thay vào đó là j của bị cắt đứt và trông giống như 1.

Nếu tôi đặt overflow-x:visible trên thẻ h1 thì đột nhiên chiều cao đầy đủ của văn bản hiển thị, nhưng thiết lập overflow-x:hidden sẽ bị cắt bớt. Tôi mong đợi hành vi này từ overflow-y, nhưng điều đó dường như không có hiệu lực. Tại sao điều này, và tôi có thể làm gì với nó?

Answer 1

Tôi đã tìm thấy một số câu trả lời trong một previous question. Theo the specs:

Các giá trị tính toán của overflow-x và overflow-y đều giống nhau như các giá trị quy định của họ, ngoại trừ một số kết hợp với visible là không thể: nếu một được quy định như visible và thứ hai là scroll hoặc auto, sau đó visible được đặt thành auto. Giá trị tính toán của overflow bằng giá trị tính toán của overflow-x nếu overflow-y giống nhau; nếu không thì đó là cặp giá trị được tính toán của overflow-x và overflow-y.

Bên cạnh đó, trên this page tác giả đề cập rằng nhiều trình duyệt áp đặt hạn chế bổ sung:

Trong Gecko, Safari, Opera, 'nhìn thấy' trở thành 'auto' cũng là khi kết hợp với 'ẩn' (trong khác từ: 'visible' trở thành 'auto' khi kết hợp với bất kỳ thứ gì khác với 'visible').

Cùng một trang cũng cung cấp bản trình diễn cho tất cả các kết hợp có thể có hiệu lực này.

Tôi không biết cách giải quyết khả thi cho tình huống của mình.

EDIT

Tôi chắc rằng tôi có thể làm những gì tôi muốn bằng cách làm tổ thẻ tiêu đề của tôi trong một thẻ khác: <div><h1>title</h1></div>. Bên trong h1 có line-height:normal để hiển thị mọi thứ theo chiều dọc, cũng như overflow:hidden để làm cho nó cắt ngắn. Phần tử bên ngoài có thể có chiều cao giới hạn nghiêm ngặt và overflow:visible. Nó không phải là lý tưởng, nhưng nó có vẻ như là lựa chọn tốt nhất.

Answer 2

Có vẻ như thay đổi các yếu tố H1 thành một phần tử nội tuyến sẽ giúp bạn có được kết quả mong muốn:

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

Chỉ cần chắc chắn rằng các yếu tố sau đây là một yếu tố khối để nó không bắt đầu trong cùng một dòng. Điều đó hoặc sử dụng chiều cao dòng chính xác và sau đó sử dụng lề âm. Sau khi tất cả, tôi chỉ có thể đoán những gì bạn đang cố gắng để làm ... Chúc may mắn!