Рассмотрим следующий 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 :
К сожалению, по состоянию на октябрь 2019 года это не поддерживается в Firefox, но поддерживается всеми другими крупными браузерами . С Chrome я смог использовать приведенный выше код, но не смог заставить что-либо работать для Firefox ( см. Ошибку 549114 ).
Обходной путь, который вы можете сделать для Firefox в случае необходимости, заключается в том, чтобы обернуть ваш неразрывный контент в таблицу, но это действительно, действительно ужасное решение, если вы можете избежать этого.
ОБНОВИТЬ
Согласно отчету об ошибке, упомянутому выше, Firefox 20+ поддерживает
page-break-inside: avoid
как механизм предотвращения разрывов столбцов внутри элемента, но приведенный ниже фрагмент кода демонстрирует, что он по-прежнему не работает со списками:Показать фрагмент кода
Как уже упоминали другие, вы можете сделать
overflow: hidden
или,display: inline-block
но это удаляет маркеры, показанные в исходном вопросе. Ваше решение будет зависеть от ваших целей.ОБНОВЛЕНИЕ 2 Поскольку Firefox предотвращает взлом,
display:table
иdisplay:inline-block
надежным, но несемантическим решением было бы обернуть каждый элемент списка в свой список и применить там правило стиля:источник
break-inside: avoid-column
page-break-inside:avoid
следует работать в FF 20.-webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid;
overflow: hidden
это лучший вариант.display: inline-block;
вызывает новые причуды с Chrome, к сожалению.Добавление;
к дочерним элементам предотвратит их разделение на столбцы.
источник
display:block
элементом. Скорее всего, это будет надежный обходной путь Firefox.<li>
но я должен был добавить,width:100%;
чтобы они не складывались горизонтально.установите следующий стиль элемента, который вы не хотите разбивать:
источник
overflow:hidden
правило не исправление для других правил, то есть то , что вызывает расположение неразрывного ...По состоянию на октябрь 2014 года взлом внутри Firefox и IE 10-11 все еще не работает. Однако добавление overflow: hidden к элементу вместе с break-inside: избежать, похоже, заставляет его работать в Firefox и IE 10-11. В настоящее время я использую:
источник
Firefox теперь поддерживает это:
Это решает проблему разрушения элементов по столбцам.
источник
page-break-before:
илиpage-break-after:
нетpage-break-inside:
Принятому ответу уже два года, и, похоже, все изменилось.
Эта статья объясняет использование
column-break-inside
имущества. Я не могу сказать, чем или чем это отличаетсяbreak-inside
, потому что только последний, кажется, задокументирован в спецификации W3. Тем не менее, Chrome и Firefox поддерживают следующее:источник
Это работает для меня в 2015 году:
источник
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-*
свойства для достижения такого же результата «.Следующий код работает для предотвращения разрывов столбцов внутри элементов:
источник
В 2019 году это работает для меня в Chrome, Firefox и Opera (после многих других неудачных попыток):
источник
Firefox 26, кажется, требует
А Chrome 32 нужен
источник
У меня была та же проблема, я думаю, и нашел решение в этом:
Работает также в FF 38.0.5: http://jsfiddle.net/rkzj8qnv/
источник
Возможный обходной путь для Firefox состоит в том, чтобы установить свойство CSS «display» элемента, у которого вы не хотите делать разрыв внутри, в «table». Я не знаю, работает ли он для тега LI (вы, вероятно, потеряете стиль списка -item), но он работает для тега P.
источник
Я просто исправил некоторые
div
s, которые разбивались на следующий столбец, добавивребенку
div
с.* Понял, что это только исправляет это в Firefox!
источник
Я столкнулся с той же проблемой при использовании карт-столбцов
я исправил это используя
источник
работает отлично
источник
Я сделал обновление фактического ответа.
Это похоже на работу с Firefox и Chrome: http://jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/
Примечание . Кажется, именно свойство float определяет поведение блока.
источник
Этот ответ может относиться только к определенным обстоятельствам; Если вы установите высоту для ваших элементов, это будет выполнено в соответствии со стилем столбца. Таким образом, сохраняя все, что содержится в пределах этой высоты, в ряд.
У меня был список, как в операторе, но он содержал два элемента, элементы и кнопки, чтобы воздействовать на эти элементы. Я относился к ней , как стол
<ul> - table
,<li> - table-row
,<div> - table-cell
поставить UL в макете в 4 столбца. Столбцы иногда делятся между элементом и его кнопками. Хитрость, которую я использовал, заключалась в том, чтобы придать элементам Div высоту линии для покрытия кнопок.источник