मैं अपने CSS3 कॉलम को केवल लाइन ब्रेक पर तोड़ने के लिए कैसे मजबूर करूं?

Question

मैं वर्तमान में एक पेज एक रूप पेज कि भी CSS3 के कॉलम को लागू करता है पर fieldsets का एक समूह का उपयोग करता है पर काम कर रहा हूँ।

समस्या कॉलम इस तरह से लपेटती है कि कभी-कभी आधे फ़ील्ड को अगले कॉलम पर तोड़ने के बाद पीछे छोड़ दिया जाता है।

प्रोजेक्ट पर मैं वास्तव में काम कर रहा हूं, मैं क्रोम 15 में एक फ़ील्ड लीजेंड में देख रहा हूं जो कि एक कॉलम के नीचे अक्षरों के शीर्ष आधा भाग और आधे अक्षरों के आधे हिस्से में विभाजित है अगले कॉलम के शीर्ष पर। फ़ायरफ़ॉक्स 7 में, मुझे यह समस्या दिखाई नहीं दे रही है (हो सकता है कि वे पहले से ही लाइन ब्रेक पर या ब्लॉक तत्वों के बाद तोड़ रहे हों)।

मुझे नहीं लगता कि यह एक क्रोम-विशिष्ट बग है, मुझे लगता है कि यह अभी निर्दिष्ट नहीं है कि इसे अभी तक कैसे किया जाना चाहिए, या कुछ।

वैसे भी, मैं स्पष्ट रूप से सभी कॉलम-सहायक ब्राउज़र को उन फ़ील्डरों के बीच तोड़ने के लिए स्पष्ट रूप से बताना चाहता हूं। धन्यवाद।

मैंने स्थिति का एक झटका लगाया। यह jsFiddle देखें। (जाहिर है परियोजना मैं ऊपर वर्णित है, लेकिन एक ही बग की तुलना में थोड़ा अलग दिखता है।)

Answer 1

लगता वेबकिट तरह column-break-inside, आप fieldset शासन को जोड़ सकते हैं जो लागू किया गया है यह उनके कॉलम भर में बंटवारे को रोकने के लिए

fieldset { 
    border: 1px solid #ddd; 
    padding: 1.0em; 
    -webkit-column-break-inside: avoid; 
} 

Answer 2

दूसरों के लिए बस सामान्य एफवाईआई जो इस मंच में टक्कर लगी है और फ़ायरफ़ॉक्स के लिए समाधान की आवश्यकता है।

इस समय लिखने पर, फ़ायरफ़ॉक्स 22.0 संपत्ति का समर्थन नहीं करता था, यहां तक ​​कि -moz- उपसर्ग के साथ भी।

लेकिन समाधान काफी सरल है: बस display:table; का उपयोग करें। तुम भी ** display:inline-block; इन समाधान के साथ समस्या यह है कि सूची आइटम अपनी सूची शैली आइटम या गोली आइकन खो देगा कर सकते हैं।

** साथ ही, display:inline-block; के साथ मैंने अनुभव की एक समस्या यह है कि यदि लगातार दो सूची आइटमों में टेक्स्ट बहुत छोटा होता है, तो नीचे की वस्तु स्वयं को ऊपर रखकर ऊपर की ओर से इनलाइन कर देगी।

display:table; दोनों समाधानों में से सबसे कम है।

अधिक यहाँ जानकारी: http://trentwalton.com/2012/02/13/css-column-breaks/

Answer 3

आप का उपयोग करना चाहिए break-inside: avoid;

पूर्ण वाक्य रचना:

li { 
-webkit-column-break-inside: avoid; 
      page-break-inside: avoid; 
       break-inside: avoid; 
} 

देखें: https://css-tricks.com/almanac/properties/b/break-inside/