जब मैं shape-outside: url(anyimage.png) का उपयोग करता हूं और इसे दाईं ओर फ्लोट करता हूं, तो इसके चारों ओर का पाठ इच्छित रूप से अच्छी तरह से लपेटता है, लेकिन जब मैं इसे बाईं ओर फ्लोट करता हूं, तो दाईं ओर पाठ एक आयत के किनारे पर घूमता है।
किसी भी विचार क्यों यह ऐसा होना चाहिए? मैंने कई पारदर्शी आकृतियों के साथ कोशिश की है और जब छवि दाईं ओर मंगाई जाती है, तो पाठ अच्छी तरह से लपेटता है, लेकिन जब इसकी बाईं ओर तैरता है, तो पाठ एक आयत के चारों ओर लपेटने के लिए चूक जाता है।
किसी भी विचार अगर यह एक ज्ञात बग है? मैं Chrome के नवीनतम संस्करण (46.0.2490.86 m) का उपयोग कर रहा हूं और केवल Chrome पर कार्यान्वयन में रुचि रखता हूं।
यहाँ फ्लोट समस्या की छवि संलग्न है
यहाँ भी वृत्त png की छवि है
और यहाँ सीएसएस है:
.element{
width:200px;
height:200px;
float:right;
shape-outside: url("circle_new.png");
shape-image-threshold: 0px;
shape-margin: 10px;
}
**
पहली प्रतिक्रिया के बाद जोड़ा गया : मुझे स्पष्ट करना चाहिए, मैं shape-outside: url के असंगत व्यवहार का कारण ढूंढ रहा हूं। मैं समझता हूं कि मैं पहले उत्तर द्वारा बताए अनुसार circle() का बहुत अच्छा उपयोग कर सकता हूं, लेकिन मैं यह चाहता हूं कि यह सभी आकृतियों के लिए काम करे , इसीलिए मैं विशेष रूप से इस मुद्दे पर आत्मज्ञान चाह रहा हूं। strong> {{ X2 }} ।
3 जवाब
आपके पास एक सिंटैक्स त्रुटि है
.element{
width:200px;
height:200px;
float:right;
shape-outside: url("circle_new.png");
shape-image-threshold: 0px; /* error */
shape-image-threshold: 0; /* in the range 0 - 1 */
shape-margin: 10px;
}
चूंकि आप एक उदाहरण पोस्ट नहीं करते हैं, इसलिए यह बताना मुश्किल है, लेकिन यह संपत्ति क्रॉस-ऑरिजनल मुद्दों के अधीन है। तो एक और सकारात्मक समस्या यह होगी कि छवि अवरुद्ध हो रही है।
क्या आपने कंसोल की जाँच की है?
ध्यान दें कि आप जो देख रहे हैं छवि का अर्थ यह नहीं है कि यह आकार के बाहर अवरुद्ध नहीं किया जा रहा है
दोनों स्थितियों में पाठ को दाईं ओर संरेखित नहीं किया गया है। यह व्यवहार सामान्य है। पाठ बाईं ओर एक ही बिंदु पर शुरू होता है और दाईं ओर विभिन्न बिंदुओं पर समाप्त होता है, क्योंकि प्रत्येक पंक्ति की एक अलग लंबाई होती है। यह वास्तव में आपकी छवि के साथ बहुत कुछ नहीं करता है
इसके आसपास सबसे अच्छा तरीका shape-outside: circle(); का उपयोग करना है और circle() के अंदर एक उचित संख्या तर्क सेट करना है। उम्मीद है की वो मदद करदे।
यदि आपका उद्देश्य पाठ को एक वृत्त के चारों ओर लपेटना है, तो आपको आकार-बाहर की संपत्ति के लिए circle() का उपयोग करना चाहिए:
p{
width:400px;
text-align:justify;
}
.element {
width:200px;
height:200px;
float:right;
shape-outside: circle(50%);
shape-image-threshold: 0px;
shape-margin: 10px;
background-image:url('http://i.stack.imgur.com/gtBMS.png');
background-size:contain;
}
p+p .element{
float:left;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis quam ex. Fusce sagittis purus mi, ut volutpat lorem venenatis id. In varius sodales dui ut molestie. <span class="element"></span>
Phasellus pretium metus id massa volutpat, sed gravida nisl fringilla. Quisque eu gravida lacus, in mollis risus. Duis et est sodales, iaculis mi et, scelerisque elit. Vivamus in massa at lectus hendrerit condimentum. Curabitur nec dignissim turpis, elementum viverra urna. In hac habitasse platea dictumst. Nunc eget ullamcorper augue. Aliquam sit amet quam feugiat, finibus lacus ac, luctus mi. In quis leo nec lectus porttitor pulvinar mollis vitae tellus. Fusce turpis quam, fringilla at aliquam sit amet, porta ac purus. Suspendisse ac faucibus dolor. Aliquam erat volutpat. Nam mauris metus, pharetra vitae velit eu, suscipit molestie odio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis quam ex. Fusce sagittis purus mi, ut volutpat lorem venenatis id. In varius sodales dui ut molestie. <span class="element"></span>
Phasellus pretium metus id massa volutpat, sed gravida nisl fringilla. Quisque eu gravida lacus, in mollis risus. Duis et est sodales, iaculis mi et, scelerisque elit. Vivamus in massa at lectus hendrerit condimentum. Curabitur nec dignissim turpis, elementum viverra urna. In hac habitasse platea dictumst. Nunc eget ullamcorper augue. Aliquam sit amet quam feugiat, finibus lacus ac, luctus mi. In quis leo nec lectus porttitor pulvinar mollis vitae tellus. Fusce turpis quam, fringilla at aliquam sit amet, porta ac purus. Suspendisse ac faucibus dolor. Aliquam erat volutpat. Nam mauris metus, pharetra vitae velit eu, suscipit molestie odio.</p> ध्यान दें कि मैंने text-align:justify; भी जोड़ा है, इसलिए पाठ दाईं ओर आकृति के करीब लपेटता है