ओवरफ्लो-एक्स क्यों है: छुपे हुए क्लिप मेरे वंशज?

Question

मैं overflow-x:hidden और overflow-y:visible के साथ एक शीर्षक तत्व होना चाहता हूं। हालांकि, किसी कारण से overflow-y संपत्ति का पालन नहीं किया जा रहा है। आप यहाँ इस अवलोकन कर सकते हैं (Chrome और Firefox पर परीक्षण): http://jsfiddle.net/YgsAw/3/

कि डेमो में, मैं "jjjjj" देखने की उम्मीद है, लेकिन बजाय जे के काट और अधिक 1 के देखो कर रहे हैं।

अगर मैं overflow-x:visible को h1 टैग पर सेट करता हूं तो अचानक पाठ की पूरी ऊंचाई दिखाई दे रही है, लेकिन overflow-x:hidden सेटिंग इसे बंद कर देती है। मैं overflow-y से इस व्यवहार की अपेक्षा करता हूं, लेकिन ऐसा कोई प्रभाव नहीं पड़ता है। यह क्यों है, और मैं इसके बारे में क्या कर सकता हूं?

Answer 1

मुझे previous question में कुछ जवाब मिले। the specs के अनुसार: सिवाय इसके कि visible साथ कुछ संयोजनों संभव नहीं हैं

overflow-x और overflow-y की गणना मूल्यों, उनके निर्दिष्ट मानों के रूप में ही कर रहे हैं: अगर एक visible के रूप में निर्दिष्ट किया जाता है और अन्य scroll या auto, तो है visibleauto पर सेट है। overflow का गणना मूल्य overflow-x के गणना मूल्य के बराबर है यदि overflow-y समान है; अन्यथा यह overflow-x और overflow-y के गणना मूल्यों की जोड़ी है।

इसके अलावा, this page पर लेखक कहा गया है कि कई ब्राउज़रों अतिरिक्त प्रतिबंध लगा:

छिपकली, सफारी, ओपेरा में, 'दृश्य' 'ऑटो' भी जब 'छुपा' के साथ संयुक्त हो जाता है (अन्य में शब्द: 'दृश्यमान' 'ऑटो' बन जाता है जब किसी अन्य चीज़ के साथ 'दृश्यमान' से अलग होता है)।

वही पृष्ठ सभी संभावित संयोजनों के लिए डेमो भी प्रदान करता है जहां यह प्रभाव देखा जा सकता है।

मुझे मेरी स्थिति के लिए व्यवहार्य समाधान के बारे में पता नहीं है।

संपादित

मैं बहुत मैं एक और टैग में मेरी शीर्षक टैग घोंसले बनाने के जो मैं चाहता क्या कर सकते हैं यकीन है: <div><h1>title</h1></div>। आंतरिक h1 में line-height:normal है जो सबकुछ लंबवत रूप से दिखाई देने के साथ-साथ overflow:hidden को छोटा करने के लिए बनाता है। बाहरी तत्व में सख्ती से सीमित ऊंचाई और overflow:visible हो सकता है। यह आदर्श नहीं है, लेकिन यह सबसे अच्छा विकल्प लगता है।

Answer 2

यह एक इनलाइन तत्व में एच 1 तत्व को बदलने आप इच्छित परिणाम प्राप्त कर सकेंगे लगता है:

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

बस सुनिश्चित करें कि निम्नलिखित तत्व एक ब्लॉक तत्व है तो यह एक ही पंक्ति में शुरू नहीं करता है सुनिश्चित करें। वह सही रेखा-ऊंचाई का उपयोग करें और फिर नकारात्मक मार्जिन का उपयोग करें। आखिरकार, मैं केवल अनुमान लगा सकता हूं कि आप क्या करने की कोशिश कर रहे हैं ... शुभकामनाएँ!