Wkhtmltopdf Zeichen in einer Zeile, die teilweise zwischen den Seiten geschnitten werden

Ich bin gerade darüber gestoßen und habe etwas gefunden, das das Problem für mich gelöst hat. In meinem speziellen Fall gab es divs mit display: inline-block; margin-bottom: -20px;. Nachdem ich sie geändert hatte, um den unteren Rand zu blockieren und zurückzusetzen, verschwand die Linienaufteilung. YMMV.

Gemäß einiger Dokumentation fand ich (siehe Seitenumbruch), dass dies ein bekanntes Problem ist und die Verwendung von CSS-Seitenumbrüchen zum Einfügen von Seitenumbrüchen vorschlägt (vorausgesetzt, Sie verwenden eine gepatchte Version von QT):

Der aktuelle Seitenumbruch-Algorithmus von WebKit lässt viel zu wünschen übrig. Grundsätzlich rendert das Webkit alles in eine lange Seite Und schneidet es dann in Seiten auf. Das bedeutet, wenn Sie zwei Spalten Von Text haben, von denen eine vertikal um eine halbe Zeile verschoben ist. Dann schneidet das Webkit Eine Linie in Stücke, wobei die obere Hälfte auf einer Seite angezeigt wird. Und Die untere Hälfte auf einer anderen Seite. Es wird auch das Bild in zwei Teile zerlegen und So weiter. Wenn Sie die gepatchte Version von QT verwenden, können Sie die CSS-Funktion Page-break-inside verwenden, um dies zu beheben. Es gibt keine einfache Lösung für dieses Problem. Versuchen Sie, Ihre HTML-Dokumente so zu organisieren, dass sie viele Zeilen enthalten, in denen Seiten sauber geschnitten werden können.

Siehe auch: http://code.google.com/p/wkhtmltopdf/issues/detail?id=9 , http://code.google.com/p/wkhtmltopdf/ issues/detail? id = 33 und http://code.google.com/p/wkhtmltopdf/issues/detail?id=57 .

Ich hatte dieses Problem mit einem Tisch:

Dann habe ich folgendes zu meinem CSS hinzugefügt:

table, img, blockquote {page-break-inside: avoid;}

Das Problem wurde behoben:

In meinem Fall wurde das Problem durch Auskommentieren der folgenden CSS gelöst:

html, body {
  overflow-x: hidden;
} 

Überprüfen Sie im Allgemeinen, ob für Tags overflow als hidden festgelegt wurde, und entfernen Sie sie oder setzen Sie sie auf visible. 

Übrigens, ich benutze wkhtmltopdf version 0.12.2.1 unter Windows 8. 

Das Problem mit dem ausgeschnittenen Text ist ein bekanntes Webkit-Problem, und es scheint, als hätten die Entwickler in wkhtmltopdf eine Lösung gefunden. Das Aktualisieren auf 0.12.1 behebt das Textproblem. Wenn Sie keine Zeit mit Kompilierungen verschwenden möchten, können Sie die Binärdatei hier abrufen: https://github.com/h4cc/wkhtmltopdf-AMD64 ).

Ich habe ein paar Wochen im Internet gesucht und versucht, dieses Problem zu lösen. Keine der Lösungen, die ich gefunden habe, funktionierte für mich, aber etwas anderes.

Ich hatte ein zweispaltiges Layout, bei dem der Text mitten im Text abgeschnitten wurde. Im kaputten Zustand sah meine Grundstruktur so aus:

@media print {
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }
}
.col-9{
  display: inline-block;
  width: 70%;
}
.col-9{
  display: inline-block;
  width: 25%;
}

<div class="col-9">
  [a lot of text here, that would spill over multiple pages]
</div>
<div class="col-3">
  [a short sidebar here]
</div>

Ich habe es behoben, indem ich es geändert habe:

@media print {
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }
}

.col-9{
  display: block;
  float: left;
  width: 70%;
}
.col-9{
  display: block;
  float: left;
  width: 25%;
}
.clear{
  clear: both;
}

<div class="col-9">
  [a lot of text here, that no longer split mid-line.]
</div>
<div class="col-3">
  [a short sidebar here]
</div>
<div class="clear"></div>

Aus irgendeinem Grund konnte das Tool die Anzeige nicht verarbeiten: Inline-Block-Setup. Es funktioniert mit Schwimmern. Ich verwende Version 0.12.4.