Flusslayout und Überlauf
Wenn es mehr Inhalt gibt, als in einen Container passt, tritt eine Überlaufsituation auf. Zu verstehen, wie Überlauf funktioniert, ist wichtig, um mit jedem Element mit begrenzter Größe in CSS umzugehen. Dieser Leitfaden erklärt, wie Überlauf funktioniert, wenn man mit normalem Fluss arbeitet. Das HTML ist in jedem Beispiel dasselbe, daher ist es im ersten Abschnitt sichtbar und in den anderen der Übersichtlichkeit halber ausgeblendet.
Was ist Überlauf?
Einem Element eine feste Höhe und Breite zu geben und dann erheblichen Inhalt in die Box hinzuzufügen, schafft ein einfaches Überlaufbeispiel:
<div class="box">
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney.
</p>
</div>
<p>
Their names were Stephen and Joseph Montgolfier. They were papermakers by
trade, and were noted as possessing thoughtful minds and a deep interest in
all scientific knowledge and new discovery.
</p>
<p>
Before that night—a memorable night, as it was to prove—hundreds of millions
of people had watched the rising smoke-wreaths of their fires without drawing
any special inspiration from the fact.
</p>
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
width: 300px;
height: 100px;
border: 5px solid rebeccapurple;
padding: 10px;
}
Der Inhalt geht in die Box. Sobald die Box gefüllt ist, überläuft der Inhalt auf sichtbare Weise, indem er über die Box hinaus angezeigt wird und möglicherweise unter nachfolgendem Inhalt erscheint. Die Eigenschaft, die steuert, wie Überlauf verhält, ist die overflow
-Eigenschaft, die den Standardwert visible
hat. Aus diesem Grund können wir den überlaufenden Inhalt sehen.
Überlauf kontrollieren
Es gibt weitere Werte, die steuern, wie überlaufender Inhalt sich verhält. Um überlaufenden Inhalt zu verbergen, verwenden Sie den Wert hidden
. Dies kann dazu führen, dass einige Ihrer Inhalte nicht sichtbar sind.
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
width: 300px;
height: 100px;
border: 5px solid rebeccapurple;
padding: 10px;
overflow: hidden;
}
Die Verwendung des Wertes scroll
hält den Inhalt in seiner Box und fügt Bildlaufleisten hinzu, um ihn anzeigen zu können. Bildlaufleisten werden hinzugefügt, auch wenn der Inhalt in die Box passt.
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
width: 300px;
height: 100px;
border: 5px solid rebeccapurple;
padding: 10px;
overflow: scroll;
}
Die Verwendung des Wertes auto
zeigt den Inhalt ohne Bildlaufleisten an, wenn der Inhalt in die Box passt. Wenn er nicht passt, werden Bildlaufleisten hinzugefügt. Verglichen mit dem folgenden Beispiel hat overflow: scroll
oben horizontale und vertikale Bildlaufleisten, obwohl nur vertikales Scrollen benötigt wird. Das auto
-Beispiel unten fügt nur die Bildlaufleiste in die Richtung hinzu, in der wir scrollen müssen.
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
width: 300px;
height: 100px;
border: 5px solid rebeccapurple;
padding: 10px;
overflow: auto;
}
Wie bereits gelernt, erzeugt die Verwendung eines dieser Werte, außer dem Standardwert visible
, einen neuen Blockformatierungskontext.
Hinweis:
Im Working Draft of Overflow Level 3 gibt es einen zusätzlichen Wert overflow: clip
. Dieser verhält sich wie overflow: hidden
, erlaubt jedoch kein programmgesteuertes Scrollen - die Box wird nicht scrollbar. Zusätzlich erzeugt er keinen Blockformatierungskontext.
Die Eigenschaft overflow
ist tatsächlich eine Abkürzung für die Eigenschaften overflow-x
und overflow-y
. Wenn Sie nur einen Wert für overflow
angeben, wird dieser Wert für beide Achsen verwendet. Sie können jedoch beide Werte angeben, wobei der erste für overflow-x
und damit für die horizontale Richtung und der zweite für overflow-y
und die vertikale Richtung verwendet wird. Im unten stehenden Beispiel habe ich nur overflow-y: scroll
angegeben, sodass wir die unerwünschte horizontale Bildlaufleiste nicht erhalten.
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
width: 300px;
height: 100px;
border: 5px solid rebeccapurple;
padding: 10px;
overflow-y: scroll;
}
Flussbezogene Eigenschaften
Im Leitfaden zu Schreibrichtungen und Flusslayout haben wir uns die Eigenschaften block-size
und inline-size
angesehen, die in verschiedenen Schreibrichtungen sinnvoller sind, als unser Layout an die physikalischen Abmessungen des Bildschirms zu binden. Das CSS-Überlaufmodul enthält auch flussbezogene Eigenschaften für Überlauf – overflow-block
und overflow-inline
. Diese entsprechen overflow-x
und overflow-y
, jedoch hängt die Zuordnung vom Schreibrichtungsmodus des Dokuments ab.
Überlauf anzeigen
Im CSS-Überlaufmodul gibt es einige Eigenschaften, die helfen können, das Aussehen von überlaufendem Inhalt zu verbessern.
Inline-Achsen-Überlauf
Die text-overflow
-Eigenschaft behandelt überlaufenden Text in der Inline-Richtung. Sie nimmt einen von zwei Werten an: clip
, wobei der Inhalt abgeschnitten wird, wenn er überläuft – dies ist der Standardwert und damit das Standardverhalten. Es gibt auch ellipsis
, das ein Auslassungszeichen rendert, das möglicherweise durch ein besseres Zeichen für die verwendete Sprache oder Schreibrichtung ersetzt wird.
body {
font: 1.2em / 1.5 sans-serif;
}
.box {
width: 300px;
border: 5px solid rebeccapurple;
padding: 10px;
}
.box p {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
Block-Achsen-Überlauf
Die Overflow Level 3-Spezifikation fügt eine block-ellipsis
-Eigenschaft hinzu (ehemals als block-overflow
bezeichnet). Diese Eigenschaft ermöglicht das Hinzufügen eines Auslassungszeichens (oder benutzerdefinierter Zeichenketten), wenn Text in der Blockdimension überläuft, obwohl es zum Zeitpunkt des Schreibens noch keine Browserunterstützung dafür gibt.
Dies ist nützlich in Situationen, in denen Sie z. B. eine Liste von Artikeln haben und die Einträge in Boxen mit fester Höhe anzeigen, die nur eine begrenzte Menge Text aufnehmen können. Es ist möglicherweise nicht offensichtlich für den Leser, dass es mehr Inhalt gibt, auf den er klicken kann, wenn er die Box oder den Titel anklickt. Ein Auslassungszeichen zeigt deutlich an, dass es mehr Inhalt gibt. Die Spezifikation würde es ermöglichen, eine Zeichenkette oder ein reguläres Auslassungszeichen einzufügen.
Zusammenfassung
Ob in kontinuierlichen Medien im Web oder in einem Paged Media-Format wie Druck oder EPUB - zu verstehen, wie Inhalte überlaufen, ist nützlich, wenn es darum geht, mit Layoutmethoden jeder Art umzugehen. Wenn Sie verstehen, wie Überlauf im normalen Fluss funktioniert, sollten Sie die Auswirkungen von überlaufendem Inhalt in Layoutmethoden wie Grid und Flexbox leichter verstehen.
Siehe auch
- Überlaufender Inhalt-Leitfaden
- CSS-Überlauf-Modul
- CSS-Containment-Modul