How to prevent column break within an element?

后端 未结 18 2314
刺人心
刺人心 2020-11-22 16:09

Consider the following HTML:

  • Number one
  • Number two
  • &
相关标签:
18条回答
  • 2020-11-22 16:40

    This answer might only apply to certain circumstances; If you set a height to your elements, this will be obeyed by the column styling. There-by keeping anything that is contained within that height to a row.

    I had a list, like the op, but it contained two elements, items and buttons to act upon those items. I treated it like a table <ul> - table, <li> - table-row, <div> - table-cell put the UL in a 4 column layout. The columns were sometimes being split between the item and it's buttons. The trick I used was to give the Div elements a line height to cover the buttons.

    0 讨论(0)
  • 2020-11-22 16:41

    The correct way to do this is with the break-inside CSS property:

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

    Unfortunately, as of October 2019, this is not supported in Firefox but it is supported by every other major browser. With Chrome, I was able to use the above code, but I couldn't make anything work for Firefox (See Bug 549114).

    The workaround you can do for Firefox if necessary is to wrap your non-breaking content in a table but that is a really, really terrible solution if you can avoid it.

    UPDATE

    According to the bug report mentioned above, Firefox 20+ supports page-break-inside: avoid as a mechanism for avoiding column breaks inside an element but the below code snippet demonstrates it still not working with lists:

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

    As others mention, you can do overflow: hidden or display: inline-block but this removes the bullets shown in the original question. Your solution will vary based on what your goals are.

    UPDATE 2 Since Firefox does prevent breaking on display:table and display:inline-block a reliable but non-semantic solution would be to wrap each list item in its own list and apply the style rule there:

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

    0 讨论(0)
  • 2020-11-22 16:41

    set following to the style of the element that you don't want to break:

    overflow: hidden; /* fix for Firefox */
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    
    0 讨论(0)
  • 2020-11-22 16:41

    As of October 2014, break-inside still seems to be buggy in Firefox and IE 10-11. However, adding overflow: hidden to the element, along with the break-inside: avoid, seems to make it work in Firefox and IE 10-11. I am currently using:

    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;
    
    0 讨论(0)
  • 2020-11-22 16:41

    I just fixed some divs that were splitting onto the next column by adding

    overflow: auto
    

    to the child divs.

    *Realized it only fixes it in Firefox!

    0 讨论(0)
  • 2020-11-22 16:42

    I faced same issue while using card-columns

    i fixed it using

     display: inline-flex ;
     column-break-inside: avoid;
     width:100%;
    
    0 讨论(0)
提交回复
热议问题