Tworzę raport HTML, który będzie można wydrukować i ma „sekcje”, które powinny zacząć się na nowej stronie.
Czy jest jakiś sposób na umieszczenie w HTML / CSS czegoś, co zasygnalizuje przeglądarce, że musi wymusić podział strony (rozpoczęcie nowej strony) w tym momencie?
Nie muszę tego działać w każdej przeglądarce, myślę, że mogę powiedzieć ludziom, aby korzystali z określonego zestawu przeglądarek w celu wydrukowania tego.
źródło
page-break-after
„dotyczy elementów blokowych generujących pole”, więc użycie pustego<span>
elementu nie zadziała. Lepiej jest zastosować go do fragmentu treści. Zobacz developer.mozilla.org/en-US/docs/Web/CSS/page-break-after.pagebreak { min-height: 1px; page-break-before: always; }
Wypróbuj ten link
źródło
h1
nie jest dobrym przykładem, ponieważ oznacza nagłówek pierwszego poziomu, a strona zwykle powinna mieć tylko jeden taki nagłówek.h1:not(:first-child) { page-break-before:always; }
Chciałem po prostu zaktualizować.
page-break-after
jest już starszą własnością.Oficjalna strona stwierdza
źródło
Możesz użyć właściwości CSS
page-break-before
(lubpage-break-after
). Wystarczy ustawićpage-break-before: always
na tych elementów blokowych (np pozycjądiv
,p
lubtable
elementy), które powinny rozpocząć się w nowym wierszu.Na przykład, aby spowodować przerwanie linii przed nagłówkiem drugiego poziomu i przed jakimkolwiek elementem w klasie
newpage
(np.<div class=newpage>
...), należy użyćźródło
Po prostu dodaj to, gdzie potrzebujesz strony, aby przejść do następnej (tekst „strona 1” będzie na stronie 1, a tekst „strona 2” będzie na drugiej stronie).
To też działa:
źródło
Załóżmy, że masz bloga z artykułami takimi jak ten:
Właśnie dodanie tego do CSS działało dla mnie:
(przetestowany i działa na Chrome 69 i Firefox 62).
Odniesienie:
https://www.w3schools.com/cssref/pr_print_pageba.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after ; ważna uwaga: tutaj jest powiedziane,
This property has been replaced by the break-after property.
ale nie działało dla mniebreak-after
. Również dokument MDN obreak-after
nie wydaje się być specyficzny dla podziałów stron, więc wolę zachować (działający)page-break-after: always;
.źródło
Przykład:
Podczas drukowania pliku HTML z powyższym kodem podgląd wydruku pokaże trzy strony (po jednej dla każdego bloku HTML „ HTML_BLOCK_n ”), gdzie podobnie jak w przeglądarce wszystkie trzy bloki pojawiają się kolejno jeden po drugim.
źródło
Potrzebowałem podziału strony po każdym 3 wierszu, gdy używamy polecenia drukowania w przeglądarce.
Dodałem <div style = 'page-break-before: always;'> </div>
po każdym 3 rzędzie i mój div div mają display: flex; więc usunąłem display: flex; i działało tak, jak chcę.
źródło
CSS
HTML
źródło
@ Chris Doggett ma doskonały sens. Chociaż znalazłem jedną śmieszną sztuczkę na lvsys.com , i faktycznie działa ona na Firefox i Chrome. Wystarczy umieścić ten komentarz w dowolnym miejscu, w którym chcesz wstawić podział strony. Możesz także zastąpić
<p>
znacznik dowolnym elementem blokowym.źródło