จะป้องกันการแตกคอลัมน์ภายในองค์ประกอบได้อย่างไร

พิจารณา 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>

และ CSS ต่อไปนี้:

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

ตามที่เป็นอยู่ปัจจุบัน Firefox แสดงผลแบบเดียวกันนี้:

• 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

แก้ไข:ระบุความกว้างเฉพาะเพื่อแสดงการแสดงผลที่ไม่ต้องการ ในกรณีจริงแน่นอนไม่มีความกว้างคงที่

วิธีที่ถูกต้องในการทำเช่นนี้คือคุณสมบัติ CSS ตัวแบ่ง :

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

แต่น่าเสียดายที่ในเดือนตุลาคม 2019 นี้จะไม่ได้รับการสนับสนุนใน Firefoxแต่ได้รับการสนับสนุนจากเบราว์เซอร์ที่สำคัญอื่น ๆ ทุกคน ด้วย Chrome ฉันสามารถใช้รหัสด้านบนได้ แต่ฉันไม่สามารถทำงานอะไรให้ Firefox ได้ ( ดู Bug 549114 )

วิธีแก้ปัญหาที่คุณสามารถทำได้สำหรับ Firefox หากจำเป็นคือการห่อเนื้อหาที่ไม่ทำลายของคุณลงในตาราง แต่นั่นเป็นวิธีการแก้ปัญหาที่เลวร้ายจริงๆถ้าคุณสามารถหลีกเลี่ยงได้

UPDATE

ตามรายงานข้อผิดพลาดดังกล่าวข้างต้น Firefox 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แต่สิ่งนี้จะลบกระสุนที่แสดงในคำถามเดิม โซลูชันของคุณจะแตกต่างกันไปตามเป้าหมายของคุณ

อัปเดต 2เนื่องจาก Firefox ป้องกันการแตกหัก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>

เพิ่ม;

display: inline-block;

องค์ประกอบลูกจะป้องกันไม่ให้ถูกแยกระหว่างคอลัมน์

ตั้งค่าตามสไตล์ขององค์ประกอบที่คุณไม่ต้องการทำลาย:

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

เมื่อวันที่ตุลาคม 2557 ความผิดพลาดภายในยังคงเป็นรถใน Firefox และ IE 10-11 อย่างไรก็ตามการเพิ่มโอเวอร์โฟลว์: ซ่อนอยู่ในองค์ประกอบพร้อมกับตัวแบ่ง: หลีกเลี่ยงดูเหมือนว่าจะทำงานใน Firefox และ 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;

Firefox รองรับสิ่งนี้:

page-break-inside: avoid;

วิธีนี้จะช่วยแก้ปัญหาองค์ประกอบที่ทำลายคอลัมน์ต่างๆ

คำตอบที่ยอมรับได้คือตอนนี้มีอายุสองปีและสิ่งต่าง ๆ มีการเปลี่ยนแปลง

บทความนี้จะอธิบายการใช้งานของcolumn-break-insideคุณสมบัติ ฉันไม่สามารถบอกได้ว่าสิ่งนี้แตกต่างกันbreak-insideอย่างไรเพราะเหตุใดเอกสารฉบับหลังจึงปรากฏในข้อมูลจำเพาะของ W3 อย่างไรก็ตาม Chrome และ Firefox รองรับสิ่งต่อไปนี้:

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

สิ่งนี้ใช้ได้กับฉันในปี 2558:

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>

รหัสต่อไปนี้ทำงานเพื่อป้องกันการแบ่งคอลัมน์ภายในองค์ประกอบ:

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

ในปี 2019 การใช้งานได้กับฉันใน Chrome, Firefox และ Opera (หลังจากความพยายามอื่น ๆ ที่ไม่สำเร็จ):

.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;
}

ดูเหมือนว่า Firefox ต้องการ

page-break-inside: avoid;

และความต้องการของ Chrome 32

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

ฉันมีปัญหาเดียวกันฉันคิดและพบวิธีแก้ปัญหาในเรื่องนี้:

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

ทำงานได้ใน FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

วิธีแก้ปัญหาที่เป็นไปได้สำหรับ Firefox คือการตั้งค่าคุณสมบัติ CSS "display" ขององค์ประกอบที่คุณไม่ต้องการให้มีการหยุดพักใน "table" ฉันไม่ทราบว่าจะใช้งานได้กับแท็ก LI (คุณอาจสูญเสียรายการ - ลักษณะรายการ) แต่ใช้งานได้กับแท็ก P

ฉันเพิ่งแก้ไขบางส่วนdivที่แยกลงในคอลัมน์ถัดไปโดยการเพิ่ม

overflow: auto

เพื่อให้เด็กdivs

* ตระหนักว่าแก้ไขได้เฉพาะใน Firefox!

ฉันประสบปัญหาเดียวกันในขณะที่ใช้คอลัมน์บัตร

ฉันแก้ไขโดยใช้

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

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

ทำงานได้อย่างสมบูรณ์

ฉันได้ทำการปรับปรุงคำตอบจริง

ดูเหมือนว่าจะทำงานกับ firefox และ chrome: 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 */
}

หมายเหตุ: ลอยคุณสมบัติน่าจะเป็นหนึ่งทำให้พฤติกรรมบล็อก

คำตอบนี้อาจใช้ได้กับบางสถานการณ์เท่านั้น หากคุณตั้งค่าความสูงเป็นองค์ประกอบของคุณสิ่งนี้จะถูกเชื่อฟังโดยการกำหนดสไตล์คอลัมน์ มีโดยการรักษาสิ่งที่มีอยู่ภายในความสูงที่แถว

ฉันมีรายการเช่น op แต่มีสององค์ประกอบรายการและปุ่มเพื่อดำเนินการกับรายการเหล่านั้น ผมได้รับการปฏิบัติเช่นโต๊ะ<ul> - table, <li> - table-row, <div> - table-cellใส่ UL ในรูปแบบ 4 คอลัมน์ บางครั้งคอลัมน์ถูกแยกระหว่างรายการและปุ่ม เคล็ดลับที่ฉันใช้คือการทำให้องค์ประกอบ Div มีความสูงของเส้นเพื่อครอบคลุมปุ่มต่างๆ