बदलते सीएसएस ओवरफ्लो छुपे व्यवहार

Question

इसलिए, मैंने jQuery में एक सरल एनिमेटेड प्रगति पट्टी बनाई। you can view it here.

मैं इस पोस्ट में कुछ कोड की जरूरत है, इसलिए यहाँ मेरी सीएसएस है:

.progress { 
    height: 14px; 
    width: 300px; 
    background: #111; 
    border-radius: 5px; 
    vertical-align: middle; 
    display: inline-block; 
    overflow: hidden; 
    color: white;   
} 

.filename { 
    font-size: 10px; 
    color: white; 
    position: relative; 
} 

.progresstop { 
    padding: 4px; 
    width: 40px; 
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    height: 8px; 
    float: left; 
    background: #c44639; 
    vertical-align: middle; 
    display: inline-block; 
} 

.arrow-right { 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    background: #111; 
    border-width: 7px 7px 7px ; 
    border-color: transparent transparent transparent #c44639; 
    float: left; 
    display: inline-block; 
} 

मेरे सवाल: प्रगति बार के रूप में अंत तक पहुँच जाता है, तत्वों "पॉप" अस्तित्व के बाहर जब वे div अतिप्रवाह और जब तक वे पूरी तरह से div से बाहर नहीं हो जाते हैं, तब तक दिखाई देने के बजाय छुपाए जाते हैं। विशेष रूप से, जब सीएसएस तीर गायब हो जाता है क्योंकि यह अंत तक पहुंच जाता है, प्रगति पट्टी का अंत एक त्रिकोण से एक रेखा में बदल जाता है, जो वास्तव में दृष्टि से झटकेदार होता है। तत्वों को "आसानी से" छिपाने के लिए, या तो सीएसएस या jQuery में, इस व्यवहार को बदलने का कोई तरीका है?

Answer 1

Altenatively JoshC के जवाब देने के लिए,

आप की तरह this fiddle

एचटीएमएल

एक कंटेनर में लपेट कर सकता है

<div id="progress-container"> 
    <div class='progress'> 
     <div class='progresstop'></div> 
     <div class='arrow-right'></div> 
     <div class='filename'>FILENAME</div> 
    </div> 
</div> 

सीएसएस

#progress-container { 
    height: 14px; 
    width: 300px; 
    background: #111; 
    border-radius: 5px; 
    vertical-align: middle; 
    display: inline-block; 
    overflow: hidden; 
    color: white; 
} 

.progress { 
    height: 14px; 
    width: 500px; /* large value */ 
} 

बस सुनिश्चित करें कि .progess चौड़ाई आप (पाठ, तीर, और बार) क्या जरूरत

Answer 2

आप white-space: pre देख रहे हैं।

Here is an updated example - यह काम करता है कि आप इसे अभी कैसे करना चाहते हैं।

.filename { 
    white-space: pre; 
} 

संपादित

आप एनीमेशन (जहां तीर एक नई लाइन के लिए कूदता है) के अंत में गड़बड़ दूर करने के लिए चाहते हैं, तो निम्न मार्कअप/सीएसएस का उपयोग करें:

jsFiddle example - कम अब HTML, चूंकि तीर एक छद्म तत्व है।

एचटीएमएल

<div class='progress'> 
    <div class='progresstop'></div> 
    <div class='arrow-right'></div> /* Removed this, and made the arrow a psuedo element. */ 
    <div class='filename'>FILENAME</div> 
</div> 

सीएसएस

.filename:before { 
    content:"\A"; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 7px 7px 7px; 
    border-color: transparent transparent transparent #c44639; 
    position:absolute; 
}