Skip to main content

WIE MAN: Erstellen Sie eine Box mit Bildlauftext mit CSS und HTML - 2019

Ein HTML-Bildlauffeld ist ein Feld, das Bildlaufleisten rechts und unten hinzufügt, wenn der Inhalt des Felds größer als die Feldmaße ist. Mit anderen Worten, wenn Sie über eine Box verfügen, die etwa 50 Wörter aufnehmen kann, und Text mit 200 Wörtern vorhanden ist, werden in einem HTML-Bildlauffeld Bildlaufleisten angezeigt, damit Sie die zusätzlichen 150 Wörter sehen können. In Standard-HTML würde dies den zusätzlichen Text einfach außerhalb der Box verschieben.

HTML-Scroll zu machen ist ziemlich einfach. Sie müssen nur die Breite und Höhe des Elements festlegen, das Sie scrollen möchten, und dann die CSS-Überlaufeigenschaft verwenden, um festzulegen, wie das Scrollen erfolgen soll.

Was tun mit extra Text?

Wenn Sie mehr Text haben, als in den Platz Ihres Layouts passt, haben Sie einige Optionen:

  • Schreibe den Text so um, dass er kürzer ist und passt.
  • Lassen Sie den Text über die Grenzen hinausfließen, und hoffen Sie, dass das Layout flexibel ist, um es zu unterstützen.
  • Schneiden Sie den Text ab, wo er überläuft.
  • Fügen Sie Bildlaufleisten hinzu (in der Regel vertikal für Text), sodass der Abstand zum zusätzlichen Text angezeigt wird.

Die beste Option ist normalerweise die letzte Option: Erstellen Sie ein Bildlauffeld. Dann kann zusätzlicher Text noch gelesen werden, aber Ihr Design wird nicht beeinträchtigt.

HTML und CSS dafür wären:

Text hier….

Das

Überlauf: Auto;

weist den Browser an, Bildlaufleisten hinzuzufügen, wenn diese erforderlich sind, um zu verhindern, dass der Text die Grenzen des div überschreitet. Damit dies funktioniert, müssen Sie jedoch auch die für das div festgelegten Eigenschaften für Breite und Höhe festlegen, damit Grenzen überschritten werden.

Sie können den Text auch abschneiden, indem Sie den Überlauf ändern: auto; überlaufen: versteckt ;. Wenn Sie die Überlauf-Eigenschaft auslassen, wird der Text über die Grenzen des div-Bereichs hinausragen.

Sie können Bildlaufleisten zu mehr als nur Text hinzufügen

Wenn Sie ein großes Bild haben, das Sie in einem kleineren Bereich anzeigen möchten, können Sie Bildlaufleisten auf dieselbe Weise wie bei Text hinzufügen.

Shasta spielt Frisbee

In diesem Beispiel befindet sich das 400x509-Bild innerhalb eines 300x300-Absatzes.

Tabellen können von Bildlaufleisten profitieren

Lange Tabellen mit Informationen können sehr schnell sehr schwer zu lesen sein. Wenn Sie sie jedoch in ein Div mit begrenzter Größe einfügen und dann die Überlaufeigenschaft hinzufügen, können Sie Tabellen mit vielen Daten generieren, die keinen extremen Speicherplatz auf Ihrer Seite beanspruchen .

Der einfachste Weg ist wie bei Bildern und Text. Fügen Sie einfach ein div um die Tabelle hinzu, legen Sie die Breite und Höhe des div fest und fügen Sie die Überlaufeigenschaft hinzu:

….
NameTelefon
Jennifer502-5366

Wenn Sie dies tun, wird in der Regel eine horizontale Bildlaufleiste angezeigt, da der Browser davon ausgeht, dass der Chrom der Bildlaufleisten die Tabelle überlappt. Es gibt viele Möglichkeiten, dies zu beheben, indem Sie die Breite der Tabelle und andere ändern. Mein Favorit ist es jedoch, das horizontale Scrollen mit der CSS 3-Eigenschaft einfach zu deaktivieren

Überlauf-x

. Einfach hinzufügen

Überlauf-x: ausgeblendet;

zum div, und dadurch wird die horizontale Bildlaufleiste entfernt. Testen Sie dies unbedingt, da möglicherweise Inhalte verschwinden.

Firefox unterstützt die Verwendung der TBODY-Tags für Überlauf

Eine sehr nette Funktion des Firefox-Browsers ist, dass Sie die Überlaufeigenschaft für innere Tabellen-Tags wie tbody und thead oder tfoot verwenden können. Das bedeutet, dass Sie Bildlaufleisten für den Tabelleninhalt festlegen können, und die Kopfzellen bleiben über ihnen verankert. Dies funktioniert nur in Firefox, was zu schade ist, aber es ist eine nette Funktion, wenn Ihre Leser nur Firefox verwenden. Navigieren Sie zu diesem Beispiel in Firefox, um zu sehen, was ich meine.

NameTelefon
Jennifer502-5366