सीमा-त्रिज्या; अतिप्रवाह: छिपी हुई, और पाठ को

Question

क्लिप नहीं किया गया है, मैं गोलाकार divs के अंदर कुछ स्टाइलिस्ट टेक्स्ट कर रहा हूं, जहां टेक्स्ट कंटेनर के शीर्ष के ठीक ऊपर बाधा लगाता है। मैं लगभग सभी सामग्री, नेस्टेड divs, पृष्ठभूमि के रूप में सेट छवियों, आदि को नियंत्रित करने में सक्षम हूं, और उन्हें सफलतापूर्वक सभी क्लिप था, लेकिन यह मुझे गंभीर दुःख दे रहा है।

पुरानी-स्कूल छवि सीमाओं या कवर-अप का उपयोग करना एक समाधान नहीं है क्योंकि हमारे पास गतिशील ग्राफिकल पृष्ठभूमि हैं। हमें वास्तव में टेक्स्ट को क्लिप करने के लिए एक समाधान की आवश्यकता है।

यह ज्यादातर की और पुराने संस्करणों Firefox 3.x में दिखाई दे रहा है क्रोम

यहाँ साथ खेलने के लिए नमूना कोड:

http://jsfiddle.net/vfp3v/1/

div { 
    -moz-border-radius: 45px; 
    border-radius: 45px; 
    background-color: #ccc; 
    font-size: 100px; 
    color: #777; 
    line-height: 70%; 
    overflow: hidden; 
    width: 257px; 
} 

Jank:

सूचना यह नया Chrome और Firefox 4 में ठीक किया गया है - शुई:

हमारी साइट उपयोगकर्ताओं के अधिकांश Firefox 3.6 हैं, इसलिए उनके लिए एक सुरुचिपूर्ण समाधान प्रदान करने के लिए सक्षम होने के लिए प्यार होता है भी। किसी भी मदद की सराहना की! चीयर्स

Answer 1

यह एक में काम करता है एफएफ 3.6: http://jsfiddle.net/vfp3v/15/

यह कुछ कमियां भी हैं के रूप में आप दूसरे उदाहरण में देख सकते हैं (एफएफ 3.6 में) बंद काटा सीमा एक ठोस रंग है, इसलिए यदि आप कुछ प्रयोग कर रहे हैं पृष्ठभूमि की तरह यह बदसूरत लग सकता है। बस इसे देखो, यह आपकी आवश्यकताओं के अनुरूप हो सकता है।

मैं सिर्फ एक काल कहा:

<div><span></span>WXYZ</div> 

और उसके बाद के रंग जैसा ही में एक सीमा के साथ पाठ पर यह तैनात है, और सीमा के रूप में एक विस्थापन के रूप में बड़ी:

div{ 
    position:relative; 
    etc... 
} 
span{ 
    position:absolute; display:block; width:100%; height:100%; 
    border:25px solid #fff; top:-25px; left:-25px; 
    -moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */  
} 

संपादित करें: क्रोम 10.0.6 (जिसमें क्लिपिंग बग है) में इसका परीक्षण किया गया और यह काम किया!

ब्राउज़र में जो सीमा-त्रिज्या का सही ढंग से समर्थन करते हैं (और यह सीमा-रंग) भी दिखाई नहीं देता है क्योंकि यह बंद हो जाता है (अतिप्रवाह: छुपा हुआ)।