Warum schneidet Chrome den Text in meinem mehrspaltigen CSS3-Layout ab?

Question

Ich verwende ein mehrspaltiges CSS-Layout zur Anzeige von Text. Das Layout wird in Firefox korrekt angezeigt. Chrome hat jedoch einen Fehler, der schneidet den oberen und unteren Rand von Textzeichen ab . Warum ist das so? Wie kann ich es in Chrome zum Laufen bringen?

Hier ist ein Bildschirmfoto des Problems:

.multicolumn {
  max-width: 25em;
  columns: 3;
  margin: 0;
  font: 1.2em/.9 sans-serif;
}

.multicolumn p {
  margin: 0;
}

<div class="multicolumn">
  <p>hydrolytically hypabyssally hypogyny hyponymy mystifyingly karyotypically bathymetrically cloyingly</p>
</div>

Zum Schluss noch die Webseite, auf der ich versuche, das Ganze zum Laufen zu bringen: http://www.vcn.bc.ca/~dugan/css3/newhtml.html

Answer 1

Die Anpassung der Zeilenhöhe (oder der Schriftgröße, wie an anderer Stelle empfohlen) kann den Clipping-Bug von Chrome beseitigen, aber nur zufällig. Wenn Sie es programmatisch vermeiden wollen, ist die einzige funktionierende Lösung jetzt:

.multicolumn p {
  display: inline-block;
}

Sie können dies auf alle untergeordneten Elemente des mehrspaltigen Containers ausdehnen, aber wahrscheinlich müssen Sie hinzufügen width: 100%; zu einem bestimmten Zeitpunkt. Für weitere Informationen lesen Sie die Diskussion unter http://www.symphonious.net/2010/12/30/controlling-wrapping-in-css3-columns/ y http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/ .

Wenn der Inline-Block-Workaround nicht hilft, kann die Ursache für das Abschneiden von Textteilen auch in einer rekursiven Anwendung des mehrspaltigen Designs liegen. Ich habe dies in einem komplexeren Szenario als dem obigen beobachtet, in dem ein entferntes Elternteil eines mehrspaltigen Textcontainers sein eigenes Spaltenlayout hatte. Durch das Entfernen der Spaltenanzahl aus dem übergeordneten Container wurden die Probleme mit dem Spaltenumbruch behoben.

Answer 2

Unglaublich, dass es das auch nach 11 Jahren noch gibt. Hier MDN hat ein Beispiel zur Lösung dieses Problems, das mit der akzeptierten Antwort übereinstimmt.

.column-item {
  break-inside: avoid;
  page-break-inside: avoid;
}

Answer 3

body{ 
    -webkit-column-break-inside:avoid;
}

Answer 4

Der gesamte Text scheint angezeigt zu werden, wenn Sie in der Regel p in dugan.css eine Zeilenhöhe von 1,5 einstellen. Es scheint immer noch ein Fehler in genau, wie Chrome die Spalten balanciert, müssen Sie möglicherweise einen leeren Absatz in oder fügen Sie einige Polsterung auf den letzten Absatz oder etwas.

Answer 5

In bestimmten Situationen habe ich gesehen, dass Auffüllungen und Ränder im spaltenförmigen Inhalt dieses Problem verursachen. Versuchen Sie es:

.columnized-content { margin: 0; padding: 0; }