ब्रेक-इन - सीएसएस-ट्रिक्स

कॉलम बहने और सामग्री को संतुलित करने का एक बड़ा काम करते हैं। दुर्भाग्य से, सभी तत्व इनायत से नहीं बहते हैं। कभी-कभी तत्व स्तंभों के बीच फंस जाते हैं।

सौभाग्य से, आप ब्राउज़र को विशिष्ट तत्वों को एक साथ रखने के लिए कह सकते हैं break-inside।

li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )

फिलहाल, संपत्ति सार्वभौमिक रूप से मूल्यों को स्वीकार करती है autoऔर avoid।

avoidसंपत्ति को टूटने से बचाने के लिए मल्टी-कॉलम लेआउट के भीतर एक तत्व का उपयोग करें ।

इस संपत्ति के लिए सिंटैक्स पर एक अतिरिक्त नज़र डालें क्योंकि ब्राउज़रों में कुछ भिन्नता है।

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */

संपत्ति पृष्ठ विराम गुणों के बाद लेती है और समान मूल्यों को साझा करती है। अभी के लिए, फ़ायरफ़ॉक्स उपयोग करता है page-break-inside।

CodePen पर कैटी डेकोराह (@katydecorah) द्वारा पेन कॉलम को तोड़ने के अंदर का उदाहरण (CSS-Tricks) देखें।

ब्राउज़र का समर्थन

पृष्ठ विराम गुण:

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
91	87	1 1	88	टी.पी.

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	14.0-14.4

बहु-स्तंभ लेआउट समर्थन:

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
91	87	१०	१२	१०

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	10.0-10.2