Piszę wtyczkę do oprogramowania, które pobiera dużą kolekcję elementów i wstawia je do HTML w WebView w Cocoa (który używa WebKit jako renderera, więc w zasadzie możesz założyć, że ten plik HTML jest otwierany w Safari).
DIV, które tworzy, mają dynamiczną wysokość, ale nie różnią się zbytnio. Zwykle mają około 200 pikseli. W każdym razie, mając około sześciuset takich pozycji na dokument, mam naprawdę ciężki czas na wydrukowanie. O ile mi się nie poszczęści, u dołu iu góry każdej strony jest przecięty wpis na pół, co bardzo utrudnia korzystanie z wydruków.
Próbowałem podziału strony przed, podziału strony po, podziału strony wewnątrz i kombinacji tych trzech bezskutecznie. Myślę, że może to być WebKit niepoprawnie renderujący instrukcje, a może to mój brak zrozumienia, jak ich używać. W każdym razie potrzebuję pomocy. Jak mogę zapobiec przecięciu połowy moich DIV podczas drukowania?
źródło
Odpowiedzi:
To powinno działać:
Zwróć uwagę na bieżącą obsługę przeglądarki (12-03-2014) :
źródło
Tylko częściowe rozwiązanie: jedynym sposobem, w jaki mogłem to uruchomić dla IE, było zawinięcie każdego diva we własną tabelę i ustawienie podziału strony na stole, aby tego uniknąć.
źródło
page-break-inside: avoid;
poprawnie. Wreszcie mam przyzwoite obejście.page-break-inside: avoid;
sprawił mi kłopot z użyciem wkhtmltopdf.Aby uniknąć przerw w tekście, dodaj
display: table;
do CSS div zawierającego tekst.Mam nadzieję, że to również dla ciebie zadziała. Dzięki JohnS.
źródło
page-break-before: always;
z<div>
elementów. Przeszukałem ocean SO postów, artykułów, oficjalnych dokumentów i tym podobnych. Nic nie pomogło. Ale ty, mój przyjacielu, w końcu przyszedłeś z tym, czego dokładnie potrzebowałem! Nie mogę ci wystarczająco podziękować, stary !! Żałuję, że nie mogę przynieść ci kawy, dużo miłości z Indii!podział strony: unikaj; zdecydowanie nie działa w webkicie, w rzeczywistości jest znanym problemem od ponad 5 lat https://bugs.webkit.org/show_bug.cgi?id=5097
Jeśli chodzi o moje badania, nie ma znanej metody, aby to osiągnąć (pracuję nad wymyśleniem własnego hacka)
Porada, którą mogę ci dać, aby osiągnąć tę funkcjonalność w FF, zawiń zawartość, której nie chcesz; nie chcę nigdy włamać się do DIV (lub dowolnego kontenera) z przepełnieniem: auto (tylko uważaj, aby nie spowodować dziwnych pasków przewijania, aby pokaż się, zmieniając rozmiar pojemnika za mały).
Niestety, FF jest jedyną przeglądarką, w której udało mi się to osiągnąć, a webkit jest tym, o który martwię się bardziej.
źródło
Możliwe wartości podziału strony to:
auto, always, avoid, left, right
Uważam, że nie można użyć tej właściwości podziału strony po elementach absolutnie pozycjonowanych.
źródło
inline-block
s alboMam ten sam problem, ale nie mam jeszcze rozwiązania. podział strony nie działa w przeglądarkach, ale w Operze. Alternatywą może być użycie podziału strony na: unikaj; na wszystkich elementach potomnych div, aby nadal razem ... ale w moich testach atrybut-unikania nie działa np. w przeglądarce Firefox ...
We wszystkich przeglądarkach ppular działają wymuszone podziały stron przy użyciu np. podział strony: zawsze
źródło
Jednym z pułapek, na które wpadłem, był element nadrzędny, w którym atrybut „przepełnienie” ustawiony był na „auto”. To neguje elementy div potomka z atrybutem podziału strony w wersji drukowanej. W przeciwnym razie
page-break-inside: avoid
działa dla mnie dobrze w Chrome.źródło
W moim przypadku udało mi się naprawić problemy z łamaniem stron w zestawie, ustawiając wybrane divy na podział strony: unikaj, a także ustawiając wszystkie elementy do wyświetlenia: wbudowane. Więc tak:
Wygląda na to, że właściwości podziału strony można zastosować tylko do elementów wbudowanych (w pakiecie internetowym). Próbowałem zastosować tylko display: inline do poszczególnych elementów, których potrzebowałem, ale to nie zadziałało. Jedyne, co zadziałało, to zastosowanie inline do wszystkich elementów. Wydaje mi się, że to jeden z dużych kontenerów div, który psuje rzeczy.
Może ktoś mógłby to rozwinąć.
źródło
To rozwiązanie działa dla wszystkich nowych przeglądarek. Zobacz caniuse.com/#search=page-break-inside
źródło
page-break-inside: avoid;
nie zawsze działa. Wydaje się, że bierze pod uwagę wysokość i położenie elementów pojemnika.Na przykład,
inline-block
elementy, które są wyższe niż strona zostaną obcięte.Udało mi się przywrócić działającą
page-break-inside: avoid;
funkcjonalność, identyfikując element konteneradisplay: inline-block
i dodając:Mam nadzieję, że to pomoże ludziom, którzy narzekają, że „łamanie stron nie działa”.
źródło