क्रोम मेरे CSS3 बहु-कॉलम लेआउट में टेक्स्ट काट क्यों रहा है?

Question

समस्या का प्रदर्शन यहां है।

http://www.vcn.bc.ca/~dugan/css3/newhtml.html

फ़ायरफ़ॉक्स में सही ढंग से बहु-स्तंभ CSS3 के लेआउट को प्रदर्शित करता है। ओपेरा और आईई 8 इसे एक कॉलम के रूप में प्रदर्शित करते हैं (जो ठीक है)। क्रोम, हालांकि, इसे कई कॉलम के रूप में प्रदर्शित करने का प्रयास करता है और टेक्स्ट के हिस्से को काट देता है।

क्या यह क्रोम के साथ काम करने का कोई तरीका है?

Answer 1

यदि आप dugan.css में पी नियम पर 1.5 की लाइन ऊंचाई सेट करते हैं तो सभी टेक्स्ट दिखाने के लिए लगता है। क्रोम कॉलम को संतुलित करने के तरीके में अभी भी एक दोष है, आपको अंतिम अनुच्छेद या कुछ पर कुछ पैडिंग जोड़ने या खाली पैडिंग जोड़ने की आवश्यकता हो सकती है।

Answer 2

लाइन-ऊंचाई समायोजित करना (या फ़ॉन्ट आकार, जैसा कि कहीं और अनुशंसित किया गया है) क्रोम की क्लिपिंग बग को हटा सकता है, लेकिन केवल गलती से। आप इसे प्रोग्राम के रूप में से बचने के लिए चाहते हैं, अब तक केवल काम कर समाधान है:

.multicolumn p { 
    display: inline-block; 
} 

आप एकाधिक कंटेनर के सभी बच्चे तत्वों को यह विस्तार हो सकता है, लेकिन शायद आप कुछ बिंदु पर width: 100%; जोड़ने की आवश्यकता होगी। अधिक जानकारी के लिए, http://www.symphonious.net/2010/12/30/controlling-wrapping-in-css3-columns/ और http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/ पर चर्चा पढ़ें।

इसके अलावा, यदि इनलाइन-ब्लॉक वर्कअराउंड मदद नहीं करता है, तो पाठ बिट्स को काटने का कारण बहु-कॉलम डिज़ाइन का एक पुनरावर्ती अनुप्रयोग हो सकता है। मैंने इसे ऊपर की तुलना में एक अधिक जटिल परिदृश्य में देखा जहां बहु-स्तंभ टेक्स्ट कंटेनर के रिमोट पैरेंट का अपना कॉलम लेआउट था। शीर्ष-स्तरीय कंटेनर से कॉलम-गिनती को हटाकर कॉलम-ब्रेक समस्याओं को ठीक किया गया है।

Answer 3

body{ 
    -webkit-column-break-inside:avoid; 
} 

Answer 4

कुछ स्थितियों में, मैं इस समस्या के columnized सामग्री कारण में गद्दी और मार्जिन देखा है। प्रयास करें:

.columnized-content { margin: 0; padding: 0; }