Erstellen Sie eine Box mit Lauftext mit CSS und HTML

Ein HTML Bildlaufbox ist eine Box, die rechts und unten Bildlaufleisten hinzufügt, wenn der Inhalt der Box größer als die Boxabmessungen ist. Mit anderen Worten, wenn Sie ein Feld haben, das ungefähr 50 Wörter fassen kann und Sie einen Text von 200 Wörtern haben, werden in einem HTML-Bildlauffeld Bildlaufleisten angezeigt, damit Sie die zusätzlichen 150 Wörter sehen können. In Standard-HTML würde das einfach den zusätzlichen Text aus der Box herausschieben.

Das Erstellen von HTML-Scrolling ist ziemlich einfach. Sie müssen nur die Breite einstellen und Höhe des Elements, das Sie scrollen möchten, und verwenden Sie dann die CSS overflow-Eigenschaft, um festzulegen, wie der Bildlauf erfolgen soll.

Was tun mit zusätzlichem Text?

Wenn Sie mehr Text haben, als in den Platz Ihres Layouts passt, haben Sie mehrere Möglichkeiten:

• Schreiben Sie den Text so um, dass er kürzer ist und passt.
• Lassen Sie den Text über die Grenzen hinaus fließen und hoffen Sie, dass das Layout sich anpassen kann, um ihn zu unterstützen.
instagram viewer
• Schneiden Sie den Text dort ab, wo er überläuft.
• Fügen Sie Bildlaufleisten (normalerweise vertikal für Text) hinzu, damit der Raum scrollt, um den zusätzlichen Text anzuzeigen.

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

HTML und CSS dafür wären:

Text hier... 

Das Überlauf: automatisch; weist den Browser an, Bildlaufleisten hinzuzufügen, wenn sie benötigt werden, damit der Text nicht über die Grenzen des div. Damit dies funktioniert, müssen Sie jedoch auch die Stileigenschaften width und height auf dem div festlegen, damit Grenzen zum Überlaufen vorhanden sind.

Sie können den Text auch abschneiden, indem Sie den Überlauf ändern: auto; zu Überlauf versteckt; Wenn Sie die Überlaufeigenschaft weglassen, wird der Text über die Grenzen des divs hinauslaufen.

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

Wenn Sie ein großes Bild haben, das Sie auf kleinerem Raum anzeigen möchten, können Sie es wie bei Text mit Bildlaufleisten umgeben.

In diesem Beispiel befindet sich das 400 x 509-Bild in einem 300 x 300-Absatz.

Tabellen können von Bildlaufleisten profitieren

Lange Informationstabellen können sehr schnell sehr schwer zu lesen sein, aber wenn man sie in ein div mit begrenzter Größe einfügt und dann die Überlaufeigenschaft hinzufügen, können Sie Tabellen mit vielen Daten generieren, die keinen extremen Platz auf Ihrem verbrauchen Seite.

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

... 

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

Einfach hinzufügen Überlauf-x: versteckt; zum div, und das entfernt die horizontale Bildlaufleiste. Testen Sie dies unbedingt, da Inhalte möglicherweise verschwinden.

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

Eine wirklich nette Funktion des Firefox-Browsers ist, dass Sie die Überlauf-Eigenschaft für innere Tabellen-Tags wie tbody und thead oder tfoot verwenden können. Das bedeutet, dass Sie Scrollbalken auf den Tabelleninhalt setzen können und die Kopfzellen darüber verankert bleiben. Dies funktioniert nur in Firefox, was 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.

...NameTelefonJennifer502-5366. 

...