Как предотвратить разрыв столбца внутри элемента?

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>

и следующий 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

Редактировать: Ширинауказывается только для демонстрации нежелательного рендеринга.В реальном случае, конечно, нет фиксированной ширины.

Answer 1

Правильный способ сделать это с помощью свойства break-inside CSS :

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

К сожалению, ни один браузер в настоящее время не поддерживает это.С Chrome я мог использовать следующее, но я не мог заставить что-либо работать для Firefox ( См. Ошибку 549114 ):

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

Обходной путь, который вы можете сделать для Firefox, еслинеобходимо обернуть ваш неразрывный контент в таблицу, но это действительно, действительно ужасное решение, если вы можете избежать этого.

ОБНОВЛЕНИЕ

В зависимости от ошибкиВ упомянутом выше отчете Firefox 20+ поддерживает page-break-inside: avoid как механизм, позволяющий избежать разрывов столбцов внутри элемента, но приведенный ниже фрагмент кода демонстрирует, что он по-прежнему не работает со списками:

.x {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    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>

Answer 2

Добавление;

display: inline-block;

к дочерним элементам предотвратит их разбиение на столбцы.

Answer 3

установить следующий стиль элемента, который вы не хотите разбивать:

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

Answer 4

По состоянию на октябрь 2014 года, взлом внутри Firefox и IE 10-11 все еще не работает.Однако добавление overflow: hidden к элементу вместе с break-inside: избежать, похоже, заставляет его работать в 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;

Answer 5

Firefox теперь поддерживает это:

page-break-inside: avoid;

Это решает проблему разрушения элементов в столбцах.

Answer 6

Это работает для меня в 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>

Answer 7

Принятому ответу уже два года, и кажется, что все изменилось.

В этой статье объясняется использование свойства column-break-inside.Я не могу сказать, чем или чем это отличается от break-inside, потому что только последняя, ​​по-видимому, документирована в спецификации W3.Тем не менее, Chrome и Firefox поддерживают следующее:

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

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

Firefox 26, кажется, требует

page-break-inside: avoid;

А для Chrome 32 нужно

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

Answer 10

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