सीएसएस पैरेंटेड पूर्ण तत्व, पैरेंट की सीमाओं के बाहर स्वचालित चौड़ाई?

Question

तो, मेरे पास मेरे मूल तत्व को रिश्तेदार रखा गया है, ताकि टूलटिप तत्व को इसके शीर्ष पर, अंदर के अंदर पूर्ण स्थान दिया जा सके। मुझे पता है कि आपको "बाएं: 0, दाएं: 0" जोड़ने की आवश्यकता है, ताकि तत्व की चौड़ाई अभी भी ऑटो पर सेट हो सके, जो मैंने किया है। हालांकि, मेरे मूल तत्व की एक निश्चित चौड़ाई है, जिसे टूलटिप को रोक दिया जाता है, इसलिए ऑटो चौड़ाई इसके बाहर नहीं जा सकती है, क्या इसके आसपास कोई रास्ता है?

सीएसएस:

.parent { 
    position: relative; 
    width: 100px; 
    height: 100px; 
} 

.tooltip { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    text-align: center; 
    width: auto; 
    padding: 5px 10px; 
} 

तत्व:

<div class="parent"> 
    <div class="tooltip">Text goes here</div> 
</div> 

कोई जे एस कृपया, एक सीएसएस समाधान की तलाश में है, धन्यवाद!

Answer 1

.tooltip पर दोनों left और right सेट नहीं करके, और white-space: nowrap की स्थापना यह करना चाहिए:

.tooltip { 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0 auto; 
    text-align: center; 
    width: auto; 
    padding: 5px 10px; 
    white-space: nowrap; 
} 

Working example।

आपको this solution का उपयोग पूर्ण तत्व के केंद्र में करने की आवश्यकता होगी। हालांकि, इसके लिए एक अतिरिक्त तत्व की आवश्यकता होती है। .parent इनलाइन बनाया जा सकता है Demo

Answer 2

मैंने पहले इस समस्या को नहीं देखा है, लेकिन मुझे लगता है कि क्या चल रहा है, यह है कि width: auto; स्वचालित रूप से अपने माता-पिता के गुणों को प्राप्त करता है। तो या तो आपको एक संख्या (width: 50px;) या प्रतिशत (width: 50%) डालना होगा।

Answer 3

हैं, तो आप .tooltip एक तालिका के रूप में प्रस्तुत कर सकता है और यह उसकी सामग्री को फिट करने के लिए AutoSize जाएगा, लेकिन white-space:nowrap के उपयोग के साथ विपरीत, यह भी एक max-width का समर्थन करेगा।

.parent { 
    display: inline; 
    position: relative; 
} 

.tooltip { 
    position: absolute; 
    display: table; 
    top: 0; 
    left: 0; 
    text-align: center; 
    padding: 5px 10px; 
    max-width: 200px; 
}