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

272

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

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

Timwi
источник
Вы пытались придать этому li автономный стиль? как <li style = "width: ??? px"> Номер четыре немного длиннее </ li> ??? px = необходимая ширина, чтобы соответствовать этому числу четыре.
rmagnum2002

Ответы:

397

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

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

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

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

ОБНОВИТЬ

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

Как уже упоминали другие, вы можете сделать 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>

Брайан Никель
источник
4
Я считаю, что Opera 11.5 поддерживаетbreak-inside: avoid-column
Alohci
2
Глядя на комментарий 15 page-break-inside:avoid следует работать в FF 20.
Брайан Никель
23
В 2014 году правильный синтаксис выглядит следующим образом: -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid;
Carles Jove i Buxeda
3
@CarlesJoveBuxeda Не вижу каких-либо улучшений в Firefox 31. Не работает ни разбиение по столбцам, ни внутри страниц (с префиксом или без него).
Брайан Никель
6
Это немного поздно, но, поскольку это все еще проблема в 2018 году, это может быть полезно для других, кто окажется здесь. Если у кого-то все еще есть ошибки между браузерами с этим, overflow: hiddenэто лучший вариант. display: inline-block;вызывает новые причуды с Chrome, к сожалению.
SilasOtoko
170

Добавление;

display: inline-block;

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

Стив
источник
1
Это хорошо. Возможный способ предотвратить плохое поведение встроенного блока, приводящего к тому, что вещи теперь сжимаются на одной строке (если они слишком короткие), состоит в том, чтобы дополнительно обернуть это display:blockэлементом. Скорее всего, это будет надежный обходной путь Firefox.
Стивен Лу
Это решение удаляет элемент списка, поэтому, если вы используете списки заказов, например, это не будет альтернативой.
Рикардо Зеа
Прекрасно работает для разделения абзацев на столбцы.
ChrisC
для элементов списка это может работать, если вы встраиваете содержимое элемента списка (li) в элемент «span», установленный с помощью «display: inline-block». Ситуация намного сложнее, если вы хотите контролировать, где разбивать страницы или столбцы в таблицах: вы хотели бы избежать разрывов в строках таблицы (tr). Действительно, многоколоночные макеты все еще трудно настроить, но нам нужно, чтобы сайты могли адаптироваться к очень узким экранам (таким как смартфоны) и к широким дисплеям (где очень узкие столбцы действительно несправедливы.
verdy_p
7
Работает на мой, <li>но я должен был добавить, width:100%;чтобы они не складывались горизонтально.
Джастин
47

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

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;
user2540794
источник
1
Спасибо!! У меня была проблема с FF, и это исправить!
Фрэнсис Перрон
Я тоже. Вышеуказанные решения не сработали для меня, но ваше сработало. Престижность!
Maxx
Это работает на FF и на самом деле не скрывает мой контент!
Джастин
отлично. работает для абзаца текста колонки. Добавлено переполнение: скрыто в <p> и <div> со столбцами. Работает на ФФ.
dichterDichter
1
На самом деле, это overflow:hiddenправило не исправление для других правил, то есть то , что вызывает расположение неразрывного ...
Гра Double
23

По состоянию на октябрь 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;
VerticalGrain
источник
Это, кажется, самый исчерпывающий список
binaryfunt
12

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

page-break-inside: avoid;

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

Пол Хейн
источник
У тебя это работает? Я смотрю на эту скрипку в FF 22, и она не работает: jsfiddle.net/bnickel/5qwMf
Брайан Никель
То же самое здесь, не работает в Firefox 22. Кроме того, Firebug только отображает page-break-before:или page-break-after:нетpage-break-inside:
Ricardo Zea
Версия 28 Firefox. Это единственный, который работает на меня, спасибо!
Сандер Верхаген
9

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

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

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
}
keithjgrant
источник
Это не работает для общего <div class = "a">, где «a» заменяет ваш «Li» выше. Див все еще сломался внутри. ФФ 26
Насер
Не ошибка приведенный выше код корректен для описанной функции, даже если ее селектор только для элемента li. Вы все еще можете использовать другой CSS-селектор "div.a {...}" вместо "li {...}" в этом примере.
verdy_p
Однако Chrome по-прежнему не поддерживает -webkit-column-break-inside: избежать; в строке таблицы: это не работает, и мы по-прежнему не можем избежать разбивки таблиц в неправильных позициях (особенно если ячейка сказки содержит не только текст, но значки; но Chrome также кажется разбитым в любой вертикальной позиции в середине текстовой строки , разбивая текст на верхнюю часть текстовых глифов внизу первого столбца и нижнюю часть текстовых глифов вверху следующего столбца !!! Результат абсолютно нечитаемый !!!
verdy_p
По состоянию на 2017 год столбец-разбиение внутри не является действительным свойством CSS. MDN только говорит: «Edge также поддерживает нестандартный вариант -webkit-column-break-inside».
Джейкоб С. говорит восстановить Монику
9

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

Себастьян Гикель
источник
Это работает для меня на ulэлементах, размещена на CSS трюков: css-tricks.com/almanac/properties/b/break-inside , и кажется правильным на основе нот совместимости caniuse: «Частичная поддержка относится не поддерживая break-before, break-after, break-insideсвойства . WebKit- и Blink-браузеры имеют эквивалентную поддержку нестандартных -webkit-column-break-*свойств для выполнения такого же результата (но только autoи alwaysзначение). Firefox не поддерживает break-*но поддерживают page-break-*свойства для достижения такого же результата «.
nabrown
3

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

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;
AlphaMycelium
источник
3

В 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;
}
Hextech
источник
2

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

page-break-inside: avoid;

А Chrome 32 нужен

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;
КАРТА
источник
2

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

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

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

dichterDichter
источник
Это решение помогает мне
OzzyCzech
1

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

Кристофер
источник
Это решение удаляет элемент списка, поэтому, если вы используете списки заказов, например, это не будет альтернативой.
Рикардо Зеа
1

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

overflow: auto

ребенку div с.

* Понял, что это только исправляет это в Firefox!

mateostabio
источник
1

Я столкнулся с той же проблемой при использовании карт-столбцов

я исправил это используя

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;
Mysterious_Anny
источник
1
<style>
ul li{display: table;}  
</style>

работает отлично

Тахир
источник
0

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

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

Gatsbimantico
источник
0

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

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

пройдоха
источник