So lösen Sie das Problem zu langer Inhalte in CSS

Wenn Sie CSS schreiben, müssen Sie die Wichtigkeit des Designs vergessen haben. Wenn beispielsweise die Länge des Inhalts unsere Erwartungen übertrifft und wir die Möglichkeit nicht erklären können, wird das Seitendesign wahrscheinlich zusammenbrechen. Wir können nicht garantieren, dass CSS immer wie erwartet funktioniert, aber wir können es zumindest mit verschiedenen Arten von Inhalten testen, um das Risiko zu verringern, dass dies passiert.

Die konkrete Situation ist wie folgt:

Eine Schaltfläche mit einem kleinen Symbol auf der rechten/linken Seite

Dies ist eine Umschalttaste mit einem Akkordeoneffekt. Rechts neben der Schaltfläche befindet sich ein kleines Symbol, das darauf hinweist, dass sie anklickbar ist. Wenn der Schaltflächenbereich jedoch nicht lang genug ist, verdeckt der Text auf der Schaltfläche das Symbol. Dies kann passieren, wenn wir längere Inhalte nicht berücksichtigen.

Wir können auf der rechten Seite genügend Abstand hinzufügen, um der Größe des Symbols zu entsprechen

.button {
  padding-right: 50px;
}

Beachten Sie, wie wir den Abstand vergrößert haben, um einen sicheren Anzeigebereich für das Symbol zu schaffen. Jetzt können wir sicherstellen Das Tastenlayout ist nicht mehr fehlerhaft.

(empfohlene verwandte Tutorials: CSS-Tutorial)

Platzhalter eingeben

Besonders bei der Verwendung schwebender Anmerkungen in unserem Forummodus Wenn sich die Schaltfläche auf der rechten Seite befindet, müssen wir ausreichend Tests durchführen, um Probleme durch zu lange Platzhalter zu vermeiden.

Eine Lösung besteht darin, position: relativ zur Schaltfläche hinzuzufügen, wodurch die Schaltfläche den Platzhalter verdeckt.

Langer Name

Bei diesem Design schwebt das Bild nach links und auf der rechten Seite befinden sich Informationen zum Namen des Autors. Was passiert, wenn die Informationen auf der rechten Seite zu lang sind? Es besteht kein Zweifel, dass das Layout auseinanderfallen wird.

Das Problem hierbei ist, dass wir das Bild nur nach links verschoben haben, wodurch der Name des Autors daneben verschoben wurde. Dies funktioniert jedoch nur dann gut, wenn der Name des Autors kürzer ist.

Um das Seitenlayout anpassbarer zu machen, müssen wir die Breite beider Elemente erhöhen. Die empfehlenswertere Methode ist die Verwendung von Flexbox, die für solche kleinen Komponenten besser geeignet ist.

Der Artikel enthält lange Links/Wörter

Manchmal enthält der Artikel einige sehr lange Hyperlinks oder Wörter, die möglicherweise nicht angezeigt werden, wenn das Fenster sehr breit ist Probleme. Bei manchen kleineren Geräten wie Telefonen oder Tablets kann dies jedoch zu störenden horizontalen Bildlaufleisten führen.

Wir haben zwei Lösungen für dieses Problem:

(1) Verwenden Sie CSS-Wortumbruch

.article-body p {
  word-break: break-all;
}

Das Wortumbruch-Attribut funktioniert in verschiedenen Browsern nicht gut. Das Gleiche, Daher muss es bei der Verwendung vollständig getestet werden.

(2) Überlauf und Textüberlauf zu äußeren Elementen hinzufügen

.article-body p {
  overflow: hidden;
  text-overflow: ellipsis;
}

Diese Lösung ist für lange Links benutzerfreundlicher. Bei langen Wörtern empfehle ich die Verwendung von Wortumbrüchen.

Übermäßig langer Artikel-Tag

Wenn wir einen Artikel-Tag auf der Karte platzieren, bestimmen wir seine Größe am besten nur durch die Einstellung der Polsterung. Wenn der Inhalt des Etiketts zu lang ist, kann die Programmierung der Höhe und Breite dazu führen, dass das Layout zusammenbricht.

Sie können auch eine Mindestbreite für das Etikett festlegen, wenn das Attribut „min-width“ für das mit Polsterung umschlossene Etiketteninhaltselement verwendet wird, ändert sich die Breite dynamisch und das Problem ist gelöst.

Absatzkopf mit festem Link

In diesem Beispiel befindet sich rechts neben dem Absatztitel ein Link „Mehr anzeigen“. Es gibt verschiedene Möglichkeiten, CSS zu schreiben. Eine davon ist die Verwendung der absoluten Positionierung für Links.

Wenn der Titel zu lang ist, kann es zu Problemen kommen. Eine bessere Lösung ist die Verwendung des Flexbox-Layouts, sodass der Link automatisch in die nächste Zeile gequetscht wird.

.header-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

Die obige Technik wird „Align Move Wrap“ genannt.

Empfohlenes Video-Tutorial: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem zu langer Inhalte in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!