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:
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.
In diesem Beispiel befindet sich das 400x509-Bild innerhalb eines 300x300-Absatzes. 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: 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.
Tabellen können von Bildlaufleisten profitieren
Name Telefon Jennifer 502-5366
