किसी तत्व के भीतर स्तंभ को रोकने के लिए कैसे?

Question

निम्नलिखित HTML पर विचार करें:

<div class='x'>
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

और निम्नलिखित सीएसएस:

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

जैसा कि यह खड़ा है, फ़ायरफ़ॉक्स वर्तमान में निम्नलिखित के लिए इसी तरह प्रस्तुत करता है:

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

ध्यान दें कि चौथे आइटम को दूसरे और तीसरे कॉलम के बीच विभाजित किया गया था। मैं इसे कैसे रोकूं?

वांछित प्रतिपादन कुछ अधिक लग सकता है:

• Number one    • Number four is a
• Number two      bit longer
• Number three  • Number five

या

• Number one    • Number three        • Number five
• Number two    • Number four is a
                  bit longer

संपादित करें: चौड़ाई केवल अवांछित प्रतिपादन प्रदर्शित करने के लिए निर्दिष्ट है। वास्तविक मामले में, निश्चित रूप से कोई निश्चित चौड़ाई नहीं है।

Comments

क्या आपने उस ली को एक स्टैंडअलोन शैली देने की कोशिश की है? जैसे <ली शैली = "चौड़ाई: ??? px"> नंबर चार थोड़ा लंबा है </ li> ??? px = उस नंबर चार को फिट करने के लिए चौड़ाई की आवश्यकता है।

— rmagnum2002

Answer 1

ऐसा करने का सही तरीका ब्रेक-इन सीएसएस संपत्ति के साथ है :

.x li {
    break-inside: avoid-column;
}

दुर्भाग्य से, अक्टूबर 2019 तक, यह फ़ायरफ़ॉक्स में समर्थित नहीं है , लेकिन यह हर दूसरे प्रमुख ब्राउज़र द्वारा समर्थित है । क्रोम के साथ, मैं उपरोक्त कोड का उपयोग करने में सक्षम था, लेकिन मैं फ़ायरफ़ॉक्स ( बग 549114 देखें ) के लिए कुछ भी काम नहीं कर सका ।

यदि आप आवश्यक हो तो वर्कअराउंड फ़ायरफ़ॉक्स के लिए कर सकते हैं यदि आपकी गैर-ब्रेकिंग सामग्री को एक तालिका में लपेटना है, लेकिन यह वास्तव में बहुत ही भयानक समाधान है, अगर आप इसे टाल सकते हैं।

अपडेट करें

ऊपर उल्लिखित बग रिपोर्ट के अनुसार, फ़ायरफ़ॉक्स 20+ page-break-inside: avoidएक तत्व के अंदर कॉलम के टूटने से बचने के लिए एक तंत्र के रूप में समर्थन करता है, लेकिन नीचे दिया गया कोड स्निपेट प्रदर्शित करता है कि यह अभी भी सूचियों के साथ काम नहीं कर रहा है:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

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

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

जैसा कि अन्य उल्लेख करते हैं, आप कर सकते हैं overflow: hiddenया display: inline-blockयह मूल प्रश्न में दिखाई गई गोलियों को हटा देता है। आपके लक्ष्य क्या हैं, इसके आधार पर आपका समाधान अलग-अलग होगा।

UPDATE 2 चूंकि फ़ायरफ़ॉक्स टूटने से रोकता है display:tableऔर display:inline-blockएक विश्वसनीय लेकिन गैर-शब्दार्थ समाधान प्रत्येक सूची आइटम को अपनी सूची में लपेटना और वहां शैली नियम लागू करना होगा:

.x {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
    </ul>
    <ul>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
    </ul>
    <ul>
        <li>Number three</li>
    </ul>
</div>

Comments

मेरा मानना ​​है कि ओपेरा 11.5 का समर्थन करता हैbreak-inside: avoid-column

— Alohci

को देखते हुए टिप्पणी 15 page-break-inside:avoid एफएफ 20 में काम करना चाहिए

— ब्रायन निकल

वर्ष 2014 में, सही वाक्यविन्यास लगता है: -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid;

— कार्ल्स जोव आई बक्सडा

@CarlesJoveBuxeda फ़ायरफ़ॉक्स 31 में कोई सुधार नहीं देख रहा है। न तो कॉलम-ब्रेक-इन या पेज-ब्रेक-इन-अंदर (उपसर्ग के साथ या बिना) काम कर रहे हैं।

— ब्रायन निकल

थोड़ी देर हो गई है, लेकिन जैसा कि 2018 में अभी भी एक मुद्दा है यह उन लोगों के लिए उपयोगी हो सकता है जो यहां समाप्त होते हैं। अगर किसी को इसके साथ ब्राउज़रों के बीच अभी भी कीड़े हैं, overflow: hiddenतो बेहतर विकल्प है। display: inline-block;दुर्भाग्य से क्रोम के साथ नए झगड़े का कारण बनता है।

— सिलासोटोको

Answer 2

जोड़ रहा है;

display: inline-block;

बाल तत्वों को स्तंभों के बीच विभाजित होने से रोकेंगे।

Comments

यह अच्छा है। इनलाइन-ब्लॉक के खराब व्यवहार को रोकने के लिए एक संभावित तरीका जिससे सामान अब एक पंक्ति में स्क्वैट हो जाता है (यदि वे बहुत कम हैं) एक display:blockतत्व के साथ इसे आगे लपेटना है। यह संभवतः अभी के लिए एक ठोस फ़ायरफ़ॉक्स समाधान होगा।

— स्टीवन लू

यह समाधान सूची आइटम को निकालता है, इसलिए यदि आप उदाहरण के लिए ऑर्डर सूचियों का उपयोग कर रहे हैं तो यह विकल्प नहीं होगा।

— रिकार्डो ज़िया

अनुच्छेदों को स्तंभों में विभाजित करने के लिए पूरी तरह से काम करता है।

— ChrisC

सूची आइटम के लिए, यह तब काम कर सकता है जब आप "प्रदर्शन" इनलाइन-ब्लॉक के साथ सेट किए गए "स्पैन" तत्व के भीतर सूची आइटम (ली) की सामग्री को एम्बेड करते हैं। स्थिति बहुत अधिक जटिल है यदि आप नियंत्रित करना चाहते हैं कि टेबल के भीतर पृष्ठों या स्तंभों को कहाँ तोड़ना है: आप तालिका पंक्तियों (ट्र) के भीतर विराम से बचना चाहेंगे। वास्तव में, बहु-स्तंभ लेआउट को स्थापित करना अभी भी मुश्किल है, लेकिन हमें साइटों को बहुत संकीर्ण स्क्रीन (जैसे स्मार्टफ़ोन) और व्यापक डिस्प्ले (जहां बहुत संकीर्ण कॉलुलन्स वास्तव में अनुचित हैं, के लिए अनुकूल करने की अनुमति देने की आवश्यकता है।

— verdy_p

मेरे लिए काम करता है <li>लेकिन मुझे width:100%;उन्हें क्षैतिज रूप से स्टैकिंग से रोकने के लिए जोड़ना था ।

— जस्टिन

Answer 3

उस तत्व की शैली के अनुसार सेट करें जिसे आप तोड़ना नहीं चाहते हैं:

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;

Comments

धन्यवाद!! मुझे FF से समस्या हो रही थी और इसे ठीक किया!

— फ्रांसिस पेरोन

मैं भी। उपरोक्त समाधान मेरे लिए काम नहीं कर रहे थे, लेकिन तुम्हारा किया था। कुडोस!

— मैक्स

यह एफएफ पर काम करता है और यह वास्तव में मेरी सामग्री को छिपाता नहीं है!

— जस्टिन

अच्छा। कोलम टेक्स्ट पैराग्राफ के लिए भी काम करता है। जोड़ा गया अतिप्रवाह: कॉलम के साथ <p> ind <div> को छिपाया गया। एफएफ के लिए काम करता है।

— dichterDichter

वास्तव में, overflow:hiddenनियम अन्य नियमों के लिए ठीक नहीं है, यह वह है जो गैर-लेआउट लेआउट का कारण बनता है ...

— ग्रास डबल

Answer 4

अक्टूबर 2014 तक, फ़ायरफ़ॉक्स और IE 10-11 में ब्रेक-इन अभी भी छोटी गाड़ी है। हालांकि, अतिप्रवाह को जोड़ना: तत्व के लिए छिपा हुआ, ब्रेक-इन के साथ: बचना, फ़ायरफ़ॉक्स और IE 10-11 में इसे काम करना प्रतीत होता है। मैं वर्तमान में उपयोग कर रहा हूं:

overflow: hidden; /* Fix for firefox and IE 10-11  */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;

Comments

यह सबसे थकाऊ सूची लगती है

— बाइनरीफंट सिप

Answer 5

फ़ायरफ़ॉक्स अब इसका समर्थन करता है:

page-break-inside: avoid;

यह स्तंभों के पार होने वाले तत्वों की समस्या को हल करता है।

Comments

क्या आपको यह काम मिल गया है? : मैं एफएफ 22 में इस बेला में देख रहा हूँ और यह काम नहीं करता jsfiddle.net/bnickel/5qwMf

— ब्रायन निकल

यहां एक ही, फायरफॉक्स 22. इसके अलावा, Firebug केवल प्रदर्शित करता है में काम नहीं करता page-break-before:या page-break-after:नहीं बल्किpage-break-inside:

— रिकार्डो Zea

फ़ायरफ़ॉक्स का संस्करण 28। यह केवल एक ही है जो मेरे लिए अभी तक काम करता है, धन्यवाद!

— सैंडर वर्घन

Answer 6

स्वीकृत जवाब अब दो साल पुराना है और चीजें बदल गई हैं।

यह लेखcolumn-break-inside संपत्ति के उपयोग की व्याख्या करता है। मैं यह नहीं कह सकता कि यह कैसे या क्यों अलग है break-inside, क्योंकि केवल बाद वाला डब्ल्यू 3 कल्पना में प्रलेखित है। हालाँकि, क्रोम और फ़ायरफ़ॉक्स निम्नलिखित का समर्थन करते हैं:

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

Comments

यह सामान्य <div class = "a" के लिए काम नहीं करता है, जहाँ "a" आपके "Li" को ऊपर बदलता है। विभा अभी भी अंदर ही अंदर टूटी हुई थी। एफएफ 26

— नासर

बग नहीं। ऊपर दिए गए कोड वर्णित फ़ंक्शन के लिए सही है, भले ही इसका चयनकर्ता केवल एक गलत तत्व के लिए हो। आप इस नमूने में "ली {...}" के बजाय अभी भी एक और सीएसएस चयनकर्ता "div.a {...}" का उपयोग कर सकते हैं।

— verdy_p

हालाँकि Chrome अभी भी समर्थन नहीं करता है -webkit-column-break-अंदर: से बचें; एक टेबल रो पर: यह काम नहीं करता है और हम अभी भी खराब स्थिति में टेबल तोड़ने से बच नहीं सकते हैं (विशेष रूप से अगर एक स्टोरी सेल में केवल टेक्स्ट नहीं है, लेकिन आइकन भी हैं, लेकिन क्रोम एक टेक्स्ट लाइन के बीच में किसी भी ऊर्ध्वाधर स्थिति में विभाजित करने के लिए प्रकट होता है। , पहले कॉलम के नीचे पाठ ग्लिफ़ के ऊपरी भाग के साथ पाठ को तोड़ना, और अगले कॉलम के शीर्ष पर पाठ ग्लिफ़ का निचला हिस्सा !!! परिणाम बिल्कुल अपठनीय है !!!

— verdy_p

2017 तक, कॉलम-ब्रेक-इन एक वैध सीएसएस संपत्ति नहीं लगता है। एमडीएन केवल कहता है "एज गैर-मानक -webkit- कॉलम-ब्रेक-इनसाइड वेरिएंट का भी समर्थन करता है।"

— जैकब सी। कहते हैं

Answer 7

यह मेरे लिए 2015 में काम करता है:

li {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}
.x {
  -moz-column-count: 3;
  column-count: 3;
  width: 30em;
}

<div class='x'>
  <ul>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
    <li>Number four is a bit longer</li>
    <li>Number five</li>
  </ul>
</div>

Comments

इस पर मेरे लिए काम कर रहा है ulतत्वों, सीएसएस चाल पर पोस्ट किया जाता है: css-tricks.com/almanac/properties/b/break-inside , और caniuse संगतता नोट्स के आधार पर सही लगता है: "आंशिक समर्थन का समर्थन नहीं करने के लिए संदर्भित करता है break-before, break-after, break-insideगुण वेबकिट- और ब्लिंक-आधारित ब्राउज़रों -webkit-column-break-*में समान परिणाम (लेकिन केवल autoऔर alwaysमान) को पूरा करने के लिए गैर-मानक गुणों के बराबर समर्थन है । फ़ायरफ़ॉक्स समर्थन नहीं करता है break-*लेकिन page-break-*समान परिणाम को पूरा करने के लिए गुणों का समर्थन करता है । "

— नाब्रोर्न

Answer 8

निम्नलिखित कोड तत्वों के अंदर स्तंभों को रोकने के लिए काम करता है:

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;

Answer 9

2019 में, क्रोम, फ़ायरफ़ॉक्स और ओपेरा (कई अन्य असफल प्रयासों के बाद) पर यह मेरे लिए काम कर रहा है:

.content {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-column;
}

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

Answer 10

फ़ायरफ़ॉक्स 26 की आवश्यकता लगती है

page-break-inside: avoid;

और क्रोम 32 की जरूरत है

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;

Answer 11

मुझे वही समस्या थी जो मुझे लगता है और इस में एक समाधान मिला:

-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;  

FF 38.0.5 में भी काम करना: http://jsfiddle.net/rkzj8qnv/

Comments

यह समाधान मेरी मदद करता है

— OzzyCeshop

Answer 12

फ़ायरफ़ॉक्स के लिए एक संभावित समाधान सीएसएस संपत्ति को उस तत्व के "प्रदर्शन" पर सेट करना है जिसे आप "तालिका" के अंदर विराम नहीं देना चाहते हैं। मुझे नहीं पता कि यह LI टैग के लिए काम करता है (आप शायद सूची -आइटम-शैली खो देंगे), लेकिन यह P टैग के लिए काम करता है।

Comments

यह समाधान सूची आइटम को निकालता है, इसलिए यदि आप उदाहरण के लिए ऑर्डर सूचियों का उपयोग कर रहे हैं तो यह विकल्प नहीं होगा।

— रिकार्डो ज़िया

Answer 13

मैंने अभी कुछ divs तय किए हैं जो जोड़कर अगले कॉलम पर बंट रहे थे

overflow: auto

बच्चे को div ।

* एहसास हुआ कि यह केवल फ़ायरफ़ॉक्स में इसे ठीक करता है!

Answer 14

कार्ड-कॉलम का उपयोग करते समय मुझे उसी समस्या का सामना करना पड़ा

मैंने इसका उपयोग करके तय किया

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;

Answer 15

<style>
ul li{display: table;}  
</style>

अच्छी तरह से काम

Answer 16

मैंने वास्तविक उत्तर का अद्यतन किया।

यह फ़ायरफ़ॉक्स और क्रोम पर काम कर रहा है: http://jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/

.x{
columns: 5em;
-webkit-columns: 5em; /* Safari and Chrome */
-moz-columns: 5em; /* Firefox */
}
.x li{
    float:left;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}

नोट: नाव संपत्ति ब्लॉक व्यवहार कर रही एक हो रहा है।

Answer 17

यह उत्तर केवल कुछ परिस्थितियों के लिए लागू हो सकता है; यदि आप अपने तत्वों के लिए एक ऊंचाई निर्धारित करते हैं, तो यह कॉलम स्टाइल द्वारा पालन किया जाएगा। वहाँ कुछ भी है कि एक पंक्ति के लिए उस ऊंचाई के भीतर निहित है रखकर।

मेरे पास ऑप की तरह एक सूची थी, लेकिन इसमें उन वस्तुओं पर कार्रवाई करने के लिए दो तत्व, आइटम और बटन शामिल थे। मैंने इसे एक मेज की तरह माना <ul> - table,<li> - table-row , <div> - table-cellएक 4 कॉलम लेआउट में यूएल डाल दिया। कॉलम को कभी-कभी आइटम के बीच विभाजित किया जा रहा था और यह बटन है। मैंने जिस ट्रिक का इस्तेमाल किया, वह बटन को कवर करने के लिए Div तत्वों को एक लाइन ऊंचाई देने के लिए था।