Як запобігти розриву стовпця всередині елемента?

Розглянемо наступний 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, якщо це необхідно, - це загорнути нерозривний вміст у таблицю, але це дійсно, дуже жахливе рішення, якщо ви можете цього уникнути.

ОНОВЛЕННЯ

Згідно згаданим вище звітом про помилку, 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але це знімає кулі , зазначені в первісному питанні. Ваше рішення варіюватиме залежно від ваших цілей.

UPDATE 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, здається, прорив все ще є помилковим. Однак додавання переповнення: приховано до елемента разом із проривом всередині: уникай, здається, змушує його працювати в 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 "відображення" елемента, у якого ви не хочете мати перерву всередині, на "таблицю". Я не знаю, чи працює він для тегу LI (ви, ймовірно, втратите список -item-стиль), але він працює для тегу 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 */
}

Примітка: Поплавок властивість , здається, один робить поведінку блоку.

Ця відповідь може стосуватися лише певних обставин; Якщо ви встановите висоту для своїх елементів, це буде дотримано стилів стовпців. Таким чином, зберігаючи все, що міститься на цій висоті, до ряду.

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