"break-inside: escape-column" не работает в Firefox
Я новичок в этом, и я создаю столбцы в нижнем колонтитуле.
Я понял, что он хорошо работает для Chrome и IE, используя:
column-count: 4
break-inside: avoid-column
У меня проблемы с Firefox, я получаю свойство перечеркнутый
Что я могу делать? Можешь протянуть руку? Заранее спасибо.
Редактировать:
Используя page-break-inside: avoid, я получаю что-то вроде это.
Некоторые предметы перемещаются над его позицией, например «Предмет 9».
Например: HTML:
<ul id = "columnasFooter">
<li>Title column 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</li>
<li>Title column 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</li>
<li>Title column 3
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
</ul>
CSS:
#columnasFooter{
column-count: 3;
}
#columnasFooter li{
break-inside: avoid-column;
page-break-inside: avoid;
}
Ответы 5
попробуйте это, я думаю, его работа
page-break-inside: avoid;
Не работает правильно. Теперь я заставляю некоторые предметы перемещаться по его позиции.
Fire fox не поддерживает break-inside, см. Здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside
ТАК
Используйте page-break-inside: для firefox:
column-count: 4;
break-inside: avoid-column;
page-break-inside:avoid;
См. Здесь про page-break-inside:avoid;:
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside
Используя page-break-inside в Firefox, он показывает мне четыре столбца, но некоторые элементы, которые они находятся в элементе li, перемещаются в другой столбец. Прикрепил картинку в ОП.
прикрепите изображение, как оно выглядит в хроме, пожалуйста
Я попробовал исправить ошибку с page-break-inside: avoid, но для меня это не сработало только с этим свойством и значением в Firefox.
Затем я использовал следующее решение, которое в моем случае хорошо работает для Firefox, Chrome и Edge:
#columnasFooter {
column-count: 3;
}
#columnasFooter li {
/* for Chrome and Edge */
break-inside: avoid-column;
/* for Firefox */
display: inline-grid;
page-break-inside: avoid;
}
/* for Chrome and Edge */
@supports (break-inside: avoid-column) {
#columnasFooter li {
display: block;
}
}
Как видите, я использовал правило @supports для исправления ошибок. Может быть, кому-нибудь пригодится
Правильно работает в Firefox с overflow: hidden, но не работает в Chrome. Поэтому мы должны использовать запрос @support для контроля переполнения. Приведенный ниже код отлично работает в Chrome и Firefox.
#columnasFooter {
column-count: 3;
}
#columnasFooter li {
break-inside: avoid-column;
page-break-inside: avoid;
overflow: hidden; /* fix for firefox */
}
@supports (break-inside: avoid-column) {
#columnasFooter li {
overflow: visible; /* for chrome */
}
}<ul id = "columnasFooter">
<li>Title column 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</li>
<li>Title column 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</li>
<li>Title column 3
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
</ul>Просто применив overflow: hidden к li вместе с breakInside: "avoid", я устранил проблему в Firefox, и он продолжал работать в Chrome
это не поддерживается в firefox, см. здесь: developer.mozilla.org/en-US/docs/Web/CSS/break-inside