Der überschüssige Teil des CSS wird nicht angezeigt

Beim Webdesign stoßen wir oft auf ein Problem: Wenn der Inhalt die Breite oder Höhe der Oberfläche überschreitet, kann ein Teil des Inhalts nicht angezeigt werden. Dies liegt daran, dass Browser in den meisten Fällen Inhalte außerhalb des Gültigkeitsbereichs standardmäßig ausblenden, um die Seite sauber und schön zu halten. Manchmal möchten wir jedoch, dass der überschüssige Teil angezeigt wird. Was sollen wir tun?

Dies erfordert die Verwendung des CSS-Überlaufattributs. Diese Eigenschaft gibt an, wie mit Inhalten umgegangen wird, wenn diese die Grenzen überschreiten. Es hat vier Werte:

1. visible: Inhalte, die die Grenze überschreiten, werden angezeigt und nicht ausgeblendet.
2. hidden: Inhalte, die die Grenze überschreiten, werden ausgeblendet.
3. scrollen: Inhalte, die die Grenze überschreiten, werden angezeigt und eine Bildlaufleiste erscheint.
4. auto: Inhalte, die die Grenze überschreiten, wählt automatisch eine Bildlaufleiste aus oder blendet sie nach Bedarf aus.

Durch Setzen des Überlaufattributs kann der überschüssige Inhalt angezeigt werden. Im Folgenden stellen wir die spezifische Verwendung im Detail vor.

1. Horizontalen Überlaufinhalt anzeigen

Wenn die Inhaltsbreite eines Elements die Breite seines Containers überschreitet, kommt es zu einem horizontalen Überlauf. Um den überschüssigen Teil anzuzeigen, müssen Sie den folgenden CSS-Stil für den Container festlegen:

overflow-x: scroll; /*出现水平滚动条*/
whitespace: nowrap; /*禁止换行*/

Auf diese Weise kann der überschüssige Inhalt automatisch gescrollt und angezeigt werden, wenn die Breite des Containers nicht ausreicht angezeigt.

2. Vertikalen Überlaufinhalt anzeigen

Wenn die Inhaltshöhe eines Elements die Höhe seines Containers überschreitet, kommt es zu einem vertikalen Überlauf. Um den überschüssigen Teil anzuzeigen, müssen Sie den folgenden CSS-Stil für den Container festlegen:

overflow-y: scroll; /*出现垂直滚动条*/

Auf diese Weise kann der überschüssige Inhalt automatisch gescrollt werden, wenn die Höhe des Containers nicht ausreicht.

3. Sowohl horizontalen als auch vertikalen Überlaufinhalt gleichzeitig anzeigen

Wenn ein Element sowohl horizontalen als auch vertikalen Überlauf hat, müssen Sie die beiden oben genannten Methoden kombinieren. Die konkrete Methode ist wie folgt:

overflow: scroll; /*同时出现水平、垂直滚动条*/

Auf diese Weise können alle überschüssigen Inhalte angezeigt werden.

4. Lassen Sie den überschüssigen Inhalt über den Container laufen.

Manchmal erfordert das Seitendesign, dass der überschüssige Inhalt angezeigt wird. Zu diesem Zeitpunkt können wir CSS „Overflow Clipping“ verwenden, um dies zu erreichen. Die konkrete Methode lautet:

overflow: visible; /*允许容器外的内容显示出来*/

Auf diese Weise können alle überschüssigen Inhalte ohne Einschränkungen angezeigt werden.

Es ist zu beachten, dass bei der Verwendung von Overflow-Cropping der überschüssige Inhalt möglicherweise andere Elemente überdeckt, was die Schönheit der Seite beeinträchtigt. Daher ist bei der Verwendung besondere Vorsicht geboten.

Zusammenfassend lässt sich sagen, dass Sie durch Festlegen der Überlaufeigenschaft von CSS einen Teil des Inhalts außerhalb des Containers anzeigen können, was beim Seitendesign sehr nützlich ist. Unterschiedliche Attributwerte können unterschiedliche Anforderungen erfüllen, und gleichzeitig sollte auf die Auswirkung auf die Schönheit der Seite geachtet werden. Ich hoffe, dass die Leser durch die Einleitung dieses Artikels die Verwendung von Überlaufattributen besser beherrschen und dem Seitendesign mehr Schönheit und Funktionalität verleihen können.

Das obige ist der detaillierte Inhalt vonDer überschüssige Teil des CSS wird nicht angezeigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!