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

Рассмотрим следующий 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-свойства break-inside :

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

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

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

ОБНОВИТЬ

Согласно отчету об ошибке, упомянутому выше, 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;

По состоянию на октябрь 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;

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

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

Следующий код работает для предотвращения разрывов столбцов внутри элементов:

-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 26, кажется, требует

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 (вы, вероятно, потеряете стиль списка -item), но он работает для тега P.

Я просто исправил некоторые divs, которые разбивались на следующий столбец, добавив

overflow: auto

ребенку div с.

* Понял, что это только исправляет это в 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 */
}

Примечание . Кажется, именно свойство float определяет поведение блока.

Этот ответ может относиться только к определенным обстоятельствам; Если вы установите высоту для ваших элементов, это будет выполнено в соответствии со стилем столбца. Таким образом, сохраняя все, что содержится в пределах этой высоты, в ряд.

У меня был список, как в операторе, но он содержал два элемента, элементы и кнопки, чтобы воздействовать на эти элементы. Я относился к ней , как стол <ul> - table, <li> - table-row, <div> - table-cellпоставить UL в макете в 4 столбца. Столбцы иногда делятся между элементом и его кнопками. Хитрость, которую я использовал, заключалась в том, чтобы придать элементам Div высоту линии для покрытия кнопок.