Подтвердить что ты не робот

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Правильный способ сделать это с встроенным 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>

Ответ 2

Добавление

display: inline-block;

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

page-break-inside: avoid;

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

page-break-inside: avoid;

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

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

Ответ 9

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

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

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

Ответ 10

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

Ответ 11

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

overflow: auto

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

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

Ответ 12

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

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

Ответ 13

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

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

Ответ 14

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

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