Drukowanie CSS: Unikasz przecinających się podziałów między stronami?

199

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?

joeylange
źródło
Podaj przykładowy dokument z napotkanym problemem, a może pomożemy!
X-Istence
Odpowiedziałem na bardzo podobne pytanie na temat unikania dzielenia div na pół tutaj: stackoverflow.com/a/14348953/1026459
Travis J
1
Uwaga: Tej właściwości NIE można używać w pozycjach absolutnie pozycjonowanych (i najwyraźniej również w elementach blokowych).
Ujjwal Singh

Odpowiedzi:

335

To powinno działać:

@media print  
{
    div{
        page-break-inside: avoid;
    }
}

Zwróć uwagę na bieżącą obsługę przeglądarki (12-03-2014) :

  • Chrome - 1.0+
  • Firefox (Gecko) - 19.0+
  • Internet Explorer - 8.0+
  • Opera - 7.0+
  • Safari - 1.3+ (312)
Dmitri Farkov
źródło
7
To powinno działać. Ale tak nie jest. Informacje na temat obsługi przeglądarki można znaleźć na stronie en.wikipedia.org/wiki/ ...
Greg
1
Działa w przeglądarce Safari 6 :), która jest teraz w wersji
zapoznawczej dla
1
Działa w Chrome V 27.0.1453.116
T. Brian Jones
4
Działa również w Netscape. Dzięki!
2
Dlaczego potrzebujesz wydruku z mediów? Czy to samo, jeśli druk mediów nie jest używany, a reguła jest stosowana bezpośrednio na div?
FrenkyB
21

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ąć.

Nie ja
źródło
@easwee: dzięki. Głosowanie odbyło się w tym samym czasie, gdy dociekliwy_web_developer wystawił nagrodę na pytanie. Domyślam się, że nie podobało mu się to. ;)
NotMe
3
Piękny! Jesteś mistrzem; Szukałem sposobu na to w wkhtmltopdf , który nie obsługuje page-break-inside: avoid;poprawnie. Wreszcie mam przyzwoite obejście.
Dave
2
Przetestowano przełamanie strony w wkhtmltopdf w wersji 0.11 i działa.
cmc
Testowane za pomocą wkhtmltopdf 0.12.2.1. Tabele div wewnątrz nie są już potrzebne, wystarczy umieścić podział strony: unikaj selektora div. Pracuje!
Paul Marti
12

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.

Bonjowi
źródło
Prawie zrezygnowałem z niewyjaśnionych przestrzeni, które pojawiały się tu i tam, kiedy korzystałem 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!
Jay Dadhania,
6

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.

Bob Monteverde
źródło
5

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.

DOK
źródło
1
Najwyraźniej to nie działa na inline-blocks albo
Ujjwal Singh
5

Mam 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

Bjoern
źródło
To powinno działać z Webkit. Jednak może być konieczne wstawienie kilku dodatkowych elementów div zaprojektowanych do drukowania z podziałem strony: zawsze; po ~ pół tuzina twoich regularnych div.
ʍǝɥʇɐɯ
3

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: avoiddziała dla mnie dobrze w Chrome.

Eric D.
źródło
2

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:

@media print{
* {
    display:inline;
}
script, style { 
    display:none; 
}
div {
    page-break-inside:avoid;
}

}

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ąć.

Waltur Buerk
źródło
1
@media print{
    /* use your css selector */    
    div{ 
        page-break-inside: avoid;
    }
}

To rozwiązanie działa dla wszystkich nowych przeglądarek. Zobacz caniuse.com/#search=page-break-inside

Naun Lemos
źródło
1

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 kontenera display: inline-blocki dodając:

@media print {
    .container { display: block; } /* this is key */

    div, p, ..etc { page-break-inside: avoid; }
}

Mam nadzieję, że to pomoże ludziom, którzy narzekają, że „łamanie stron nie działa”.

Eric Wendelin
źródło