Làm thế nào để ngăn chặn phá vỡ cột trong một yếu tố?

Hãy xem xét HTML sau:

<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>

và CSS sau:

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

Như hiện tại, Firefox hiện biểu hiện điều này tương tự như sau:

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

Lưu ý rằng mục thứ tư được phân chia giữa cột thứ hai và thứ ba. Làm thế nào để tôi ngăn chặn điều đó?

Kết xuất mong muốn có thể trông giống như:

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

hoặc là

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

Chỉnh sửa: Chiều rộng chỉ được chỉ định để thể hiện kết xuất không mong muốn. Trong trường hợp thực tế, tất nhiên không có chiều rộng cố định.

Cách chính xác để làm điều này là với thuộc tính CSS đột phá :

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

Thật không may, kể từ tháng 10 năm 2019, điều này không được hỗ trợ trong Firefox nhưng nó được hỗ trợ bởi mọi trình duyệt lớn khác . Với Chrome, tôi đã có thể sử dụng mã ở trên, nhưng tôi không thể làm bất cứ điều gì hoạt động cho Firefox ( Xem Bug 549114 ).

Cách giải quyết bạn có thể làm cho Firefox nếu cần là bọc nội dung không vi phạm của bạn trong một bảng nhưng đó là một giải pháp thực sự, thực sự khủng khiếp nếu bạn có thể tránh được.

CẬP NHẬT

Theo báo cáo lỗi được đề cập ở trên, Firefox 20+ hỗ trợ page-break-inside: avoidnhư một cơ chế để tránh phá vỡ cột bên trong một phần tử nhưng đoạn mã dưới đây cho thấy nó vẫn không hoạt động với danh sách:

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

Như những người khác đề cập, bạn có thể làm overflow: hiddenhoặc display: inline-blocknhưng điều này sẽ loại bỏ các viên đạn được hiển thị trong câu hỏi ban đầu. Giải pháp của bạn sẽ thay đổi dựa trên mục tiêu của bạn là gì.

CẬP NHẬT 2 Vì Firefox không ngăn chặn được display:tablevà display:inline-blockmột giải pháp đáng tin cậy nhưng không có ngữ nghĩa sẽ là bọc từng mục danh sách trong danh sách riêng của mình và áp dụng quy tắc kiểu ở đó:

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

Thêm;

display: inline-block;

các phần tử con sẽ ngăn chúng được phân chia giữa các cột.

đặt theo kiểu của phần tử mà bạn không muốn ngắt:

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

Kể từ tháng 10 năm 2014, đột nhập dường như vẫn có lỗi trong Firefox và IE 10-11. Tuy nhiên, việc thêm tràn: ẩn vào phần tử, cùng với phần đột phá: tránh, dường như làm cho nó hoạt động trong Firefox và IE 10-11. Tôi hiện đang sử dụng:

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 hiện hỗ trợ điều này:

page-break-inside: avoid;

Điều này giải quyết vấn đề của các yếu tố phá vỡ các cột.

Câu trả lời được chấp nhận bây giờ đã hai tuổi và mọi thứ dường như đã thay đổi.

Bài viết này giải thích việc sử dụng column-break-insidetài sản. Tôi không thể nói làm thế nào hoặc tại sao điều này khác với break-inside, bởi vì chỉ cái sau dường như được ghi lại trong thông số W3. Tuy nhiên, Chrome và Firefox hỗ trợ như sau:

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

Điều này làm việc cho tôi vào năm 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>

Đoạn mã sau hoạt động để ngăn chặn các ngắt cột bên trong các phần tử:

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

Năm 2019, việc này hoạt động với tôi trên Chrome, Firefox và Opera (sau nhiều nỗ lực không thành công khác):

.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 26 dường như yêu cầu

page-break-inside: avoid;

Và Chrome 32 cần

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

Tôi đã có cùng một vấn đề tôi nghĩ và tìm thấy một giải pháp trong việc này:

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

Cũng hoạt động trong FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

Một cách giải quyết khả thi cho Firefox là đặt "hiển thị" thuộc tính CSS của phần tử mà bạn không muốn có một dấu ngắt bên trong thành "bảng". Tôi không biết nếu nó hoạt động cho thẻ LI (có thể bạn sẽ mất kiểu danh sách -item), nhưng nó hoạt động cho thẻ P.

Tôi chỉ sửa một số divs đang tách trên cột tiếp theo bằng cách thêm

overflow: auto

cho đứa trẻ div s.

* Nhận ra nó chỉ sửa nó trong Firefox!

Tôi gặp vấn đề tương tự trong khi sử dụng cột thẻ

tôi đã sửa nó bằng

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

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

hoạt động hoàn hảo

Tôi đã thực hiện một bản cập nhật của câu trả lời thực tế.

Điều này dường như đang hoạt động trên firefox và 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 */
}

Lưu ý: Các phao bất động sản dường như là một làm cho hành vi khối.

Câu trả lời này chỉ có thể áp dụng cho một số trường hợp nhất định; Nếu bạn đặt chiều cao cho các thành phần của mình, điều này sẽ được tuân theo kiểu dáng cột. Ở đó - bằng cách giữ bất cứ thứ gì có trong chiều cao đó thành một hàng.

Tôi đã có một danh sách, như op, nhưng nó chứa hai yếu tố, vật phẩm và nút để hành động theo những vật phẩm đó. Tôi coi đó như một bảng <ul> - table, <li> - table-row, <div> - table-cellđặt UL trong một bố cục 4 cột. Các cột đôi khi được phân chia giữa các mục và các nút của nó. Thủ thuật tôi đã sử dụng là cung cấp cho các phần tử Div chiều cao dòng để che các nút.