सीएसएस: क्या यह सही है कि एक div की टेक्स्ट सामग्री पैडिंग में बहती है?

Question

मुझे उम्मीद थी कि एक div के अंदर पैडिंग किसी भी पाठ से स्पष्ट रहेगी। लेकिन निम्नलिखित एचटीएमएल/सीएसएस दिए गए, सामग्री-पाठ पैडिंग में फैल गया;

<div class="foo">helloworld</div> 

.foo { 
    float: left; 
    overflow: hidden; 
    background: red; 
    padding-right: 10px; 
    width: 50px; 
    border: 1px solid green; 
} 

पाठ 50px आकार और 10px पैडिंग में बहती है। क्या यह डिजाइन द्वारा है? यदि ऐसा है तो यह बहुत गूंगा लगता है - अगर इसमें सामान है तो पैडिंग पैडिंग नहीं है! या मैं बस कुछ गलत कर रहा हूँ?

सम्मान, सीएसएस नौसिखिया।

Answer 1

यह सही व्यवहार है। overflow: hiddenबॉक्स के बाहर फैली सामग्री को क्लिप करेगा। पैडिंग बॉक्स के अंदर है, इसलिए यदि आवश्यक हो तो सामग्री उस स्थान पर खुशी से बहती रहेगी।

:

(source)

प्रभाव प्राप्त करने के लिए आप के लिए लक्ष्य कर रहे हैं, एक समाधान एक एक और div में अपने div.foo लपेट और बजाय उस पर पृष्ठभूमि निर्धारित करते हैं, इस तरह है

<div class="foowrapper"> 
    <div class="foo">purrrrrrrrr</div> 
</div> 

.foo { 
    overflow: hidden; 
    width: 40px; 
} 
.foowrapper { 
    padding-right: 10px 
    background: red; 
    border: 1px solid green; 
} 

Answer 2

ऐसा इसलिए है क्योंकि आपने div की चौड़ाई को 50px तक सीमित कर दिया है जिससे टेक्स्ट पैडिंग में फैल सकता है। उस चौड़ाई के कथन को हटाएं और div इसके भीतर txt के आकार के साथ विस्तार और अनुबंध करेगा।

<div class="foo">helloworld</div> 

.foo { 
    float: left; 
    overflow: hidden; 
    background: red; 
    padding-right: 10px; 

    border: 1px solid green; 
} 

आशा है कि आपकी मदद करता है।

Answer 3

एकमात्र तरीका मैं यह काम देख सकता था चौड़ाई से छुटकारा पा रहा है: 50px ... इसके अलावा मैं stumped !?

Answer 4

ऐसा करने के लिए, मैंने दो divs: एक मुख्य, और एक रैपर बनाया। मैं आंतरिक मुख्य div और छुपा ओवरफ्लो के लिए ऊंचाई परिभाषित करने के समाप्त हो गया, और यह समस्या हल हो गई। यहां कोड है:

div.wrap { 
    padding: 10px 10px 14px 10px; 
    border:1px solid #000000; 
    width: 200px; 
    height: 70px; 
} 
div.main { 
    line-height: 1.3em; 
    overflow:hidden; 
    width: 200px; 
    height: 60px; /* PLAY WITH THE HEIGHT so that you can essentially use it to cover up the overflow */ 
} 

    <div class="wrap"><div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div> 

रैपर में पैडिंग और सीमा (अन्य विशेषताओं के बीच) है। मुख्य में ऊंचाई और अतिप्रवाह विशेषता है - ये समस्याएं हल करने वाले हैं। परीक्षण करने के लिए स्वतंत्र महसूस करें और आप देखेंगे कि मुख्य div में कितने शब्द जोड़े गए हैं, वे आंशिक रूप से, या बिल्कुल नहीं दिखाए जाएंगे। क्रॉस ब्राउज़र भी।

Answer 5

एक अन्य दृष्टिकोण एक छद्म-पैडिंग के रूप में एक रूपरेखा का उपयोग करना है। पहले 10px द्वारा अपने तत्व की चौड़ाई को कम करें (अतिरिक्त राशि के लिए अतिरिक्त रूपरेखा आगे बढ़ेगी)। फिर अपने तत्व के लिए 10px ठोस लाल रूपरेखा-दाएं जोड़ें। रूपरेखा में किसी भी 'छुपे हुए' पाठ को शामिल किया जाएगा।

यदि कोई तत्व है जो foo के दाईं ओर दिखाई देता है, तो सुनिश्चित करें कि 10px अपने दाएं मार्जिन में जोड़ना सुनिश्चित करें (क्योंकि रूपरेखा उन्हें सामान्य चौड़ाई विस्तार की तरह अलग नहीं करेगी)।

.foo { 
    float: left; 
    overflow: hidden; 
    background: red; 
    padding-right: 10px; 
    width: 40px; 
    border: 1px solid green; 
    outline-right: 10px solid red; 
    margin-right: 10px; 

} 

Answer 6

मैं बस इस मुद्दे में भी भाग गया और यह काम करने के तरीके को पसंद नहीं करता। इससे कोई फर्क नहीं पड़ता कि बिल्ली कितनी बड़ी हो जाती है, पैडिंग हमेशा इसके बीच और बॉक्स के बीच होगी! इसलिए, अतिप्रवाह का उपयोग करते समय: छिपी हुई, सामग्री को पैडिंग तक पहुंचने पर छुपाया जाना चाहिए।

यहां एक हैक है जो सीमा के मामले में काम नहीं करता है, लेकिन कुछ (मुझे) के लिए हो सकता है: सीमाओं का उपयोग पैडिंग के रूप में करें।

<div class="foo">helloworld</div> 

.foo { 
    float: left; 
    overflow: hidden; 
    background: red; 
    padding-right: 0; /* Removed the padding. */ 
    width: 50px; 
    border-right: 10px solid red; /* 10px, background color or transparent. */ 
    box-sizing: border-box; /* I prefer this one too.. */ 
}