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

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

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

185
задан Timwi 16 окт. '11 в 18:44
источник поделиться
14 ответов

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

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

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

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

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

UPDATE

В соответствии с указанным выше сообщением об ошибке, 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>
260
ответ дан Brian Nickel 16 окт. '11 в 19:37
источник поделиться

Добавление

display: inline-block;

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

124
ответ дан Steve 09 мая '12 в 16:07
источник поделиться

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

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;
34
ответ дан user2540794 02 июля '13 в 3:13
источник поделиться

По состоянию на октябрь 2014 года брейк-хаус по-прежнему кажется ошибкой в ​​Firefox и IE 10-11. Однако добавление переполнения: скрытое к элементу, а также break-inside: avoid, похоже, заставляет его работать в 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;
17
ответ дан VerticalGrain 29 окт. '14 в 21:21
источник поделиться

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

page-break-inside: avoid;

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

8
ответ дан paul haine 29 июня '13 в 14:00
источник поделиться

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

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

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
}
8
ответ дан keithjgrant 07 нояб. '13 в 0:53
источник поделиться

Это работает для меня в 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>
6
ответ дан Sébastien Gicquel 21 дек. '15 в 14:12
источник поделиться

У меня была та же проблема, о которой я думаю, и нашел в ней решение:

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

Работа также в FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

2
ответ дан dichterDichter 01 июля '15 в 17:14
источник поделиться

Кажется, что Firefox 26 требует

page-break-inside: avoid;

И Chrome 32 нуждается в

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;
2
ответ дан MAP 13 янв. '14 в 18:14
источник поделиться

Возможным обходным решением для Firefox является установка свойства CSS "отображение" элемента, который вы не хотите перерывать внутри "таблицы". Я не знаю, работает ли это для тега LI (вы, вероятно, потеряете список-стиль), но он работает для тега P.

1
ответ дан Christopher 10 марта '12 в 21:05
источник поделиться

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

overflow: auto

дочернему элементу div s.

* Реализовано только в Firefox!

1
ответ дан mateostabio 01 февр. '15 в 9:44
источник поделиться

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

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
1
ответ дан StellarDoor5319 13 июня '17 в 19:12
источник поделиться

Я сделал обновление фактического ответа.

Это похоже на работу с 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 похоже на то, что делает поведение блока.

0
ответ дан Gatsbimantico 23 марта '14 в 15:26
источник поделиться

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

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

0
ответ дан Tod 23 июня '15 в 11:05
источник поделиться

Другие вопросы по меткам