CSS Yazdırma: Sayfalar arasında yarıya bölünmüş DIV'lerden kaçınıyor musunuz?

Ben büyük bir öğe koleksiyonu alır ve kakao bir WebView içinde HTML içine pops bir yazılım parçası için bir eklenti yazıyorum (bu WebKit oluşturucu olarak kullanır, bu yüzden temelde bu HTML dosyasının açıldığını varsayabilirsiniz Safari).

Yaptığı DIV'ler dinamik yüksekliktedir, ancak çok fazla değişmezler. Genellikle 200 piksel civarındadır. Her neyse, belge başına bu öğelerin yaklaşık altı yüzüyle, yazdırmak için gerçekten zor zamanlar geçiriyorum. Şanslı olmadıkça, her sayfanın alt ve üst kısmında ikiye bölünmüş bir giriş var ve bu da çıktıları kullanmayı çok zorlaştırıyor.

Sayfa sonu-önce, sayfa sonu-sonra, sayfa sonu-ve üç boş kombinasyonları denedim. Bence WebKit talimatları düzgün bir şekilde oluşturmuyor olabilir, ya da belki de onları nasıl kullanacağımı anlamıyorum. Her neyse, yardıma ihtiyacım var. Yazdırırken DIV'lerimin yarısını kesmeyi nasıl önleyebilirim?

Bu çalışmalı:

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

Mevcut tarayıcı desteğine dikkat edin (12-03-2014) :

• Chrome - 1.0+
• Firefox (Gecko) - 19.0+
• Internet Explorer - 8.0+
• Opera - 7.0+
• Safari - 1,3+ (312)

Sadece kısmi bir çözüm: IE için çalışmak için bunu elde etmenin tek yolu, her div kendi tabloda sarmak ve önlemek için tablodaki sayfa sonu ayarlamak oldu.

page-break-inside: avoid; bana wkhtmltopdf kullanarak sorun verdi.

Metindeki kopmaları önlemek display: table;için metin içeren div'in CSS'sine ekleyin .

Umarım bu senin için de işe yarar. Teşekkürler JohnS.

sayfa sonu: kaçının; kesinlikle webkit'te çalışmaz, aslında 5+ yıldır bilinen bir sorun olmuştur https://bugs.webkit.org/show_bug.cgi?id=5097

Araştırmalarım gittikçe, bunu başarmak için bilinen bir yöntem yok (kendi hack'imi bulmak için çalışıyorum)

Size verebileceğim tavsiye, bu işlevselliği FF'de gerçekleştirmek için, istemediğiniz içeriği sarın; taşma ile bir DIV'nin (veya herhangi bir kabın) içine girmek istemiyorsanız: auto (sadece garip kaydırma çubuklarının kabı çok küçük boyutlandırarak görün).

Ne yazık ki, FF bunu başarabildiğim tek tarayıcı ve webkit daha endişelendiğim tarayıcı.

Sayfa sonu için olası değerler şunlardır: auto, always, avoid, left, right

Kesinlikle konumlandırılmış öğelerde sayfa sonu özelliğini kullanamayacağınıza inanıyorum.

Ben henüz aynı çözüm bu sorun var. sayfa sonu tarayıcılarda değil Opera'da çalışır. Bir alternatif, sayfa sonu özelliğini kullanmak olabilir : önlemek; birlikte tutmak için div tüm alt öğelerinde ... ama benim testleri, önlemek-Öznitelik çalışmıyor örneğin. Firefox'ta ...

Tüm ppular tarayıcılarda ne işe yarar örneğin kullanarak sayfa sonları zorlanır. sayfa sonu: her zaman

Karşılaştığım bir tuzak, 'taşma' özniteliğinin 'otomatik' olarak ayarlanmış bir üst öğeydi. Bu, alt div öğelerini yazdırma sürümünde sayfa sonu özelliğiyle reddeder. Aksi takdirde, page-break-inside: avoidChrome'da benim için iyi çalışıyor.

Benim durumumda, seçtiğim div'leri sayfa içeri girme: kaçın ve ayrıca tüm öğeleri görüntülenecek şekilde ayarlayarak webkit'teki sayfa sonu sorunlarını düzeltmeyi başardım: satır içi. Şöyle böyle:

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

}

Sayfa sonu özellikleri yalnızca satır içi öğelere (webkit'te) uygulanabilir. Sadece display'i uygulamaya çalıştım: ihtiyacım olan belirli öğelere satır içi, ama bu işe yaramadı. İşe yarayan tek şey tüm öğelere satır içi uygulamaktı. Sanırım bu büyük konteynırlardan biri.

Belki birisi bunu genişletebilir.

@media print{
    /* use your css selector */    
    div{ 
        page-break-inside: avoid;
    }
}

Tüm yeni tarayıcılar için bu çözüm çalışır. Bkz. Caniuse.com/#search=page-break-inside

page-break-inside: avoid;her zaman işe yaramıyor gibi görünüyor . Konteyner elemanlarının yüksekliğini ve konumunu dikkate alıyor gibi görünüyor.

Örneğin inline-block, sayfadan daha uzun elemanlar kırpılır.

page-break-inside: avoid;Bir kapsayıcı öğesini tanımlayıp display: inline-blockekleyerek çalışma işlevini geri yükleyebildim :

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

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

Umarım bu "sayfa içeri girme işe yaramaz" şikayet eden millet yardımcı olur.