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

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?

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)

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

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.

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.

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.

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

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.

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

@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

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”.