Detaillierte Erklärung zur Lösung des Problems zu langer Inhalte in CSS

Wenn wir CSS schreiben, vergessen wir manchmal die kritischen Fälle, die in unseren Designs vorkommen. Wenn beispielsweise die Länge des Inhalts unsere Erwartungen übersteigt und wir die Möglichkeit nicht berücksichtigen können, wird das Design der Seite wahrscheinlich nicht funktionieren. Wir können nicht garantieren, dass CSS immer wie erwartet funktioniert, aber wir können es zumindest mit verschiedenen Arten von Inhalten testen, um die Wahrscheinlichkeit zu verringern, dass dies passiert.

In diesem Artikel untersuchen wir verschiedene UI-Probleme auf echten Websites, um zu erklären, warum diese Websites möglicherweise nicht funktionieren. Sind Sie bereit? bring es an!

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

Dies ist ein Ein-/Aus-Schalter für ein Akkordeon. Ein kleines Symbol rechts neben der Schaltfläche weist darauf hin, dass die Schaltfläche 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.

Eine Lösung besteht darin, auf der rechten Seite genügend Abstand hinzuzufügen, um der Symbolgröße gerecht zu werden.

.Taste {
  Polsterung rechts: 50px;
}

Beachten Sie, dass wir die Polsterung vergrößert haben, um einen sicheren Bereich für die Anzeige des Symbols zu schaffen. Jetzt können wir sicher sein, dass das Schaltflächenlayout nicht gestört wird.

Eingabeplatzhalter

Wenn wir in unserem Forum den schwebenden Callout-Modus verwenden, insbesondere wenn sich die Schaltfläche auf der rechten Seite befindet, müssen wir ausreichende Tests durchführen, um Probleme durch zu lange Platzhalter zu vermeiden.

Eine Lösung besteht darin, die Position „relativ“ zur Schaltfläche hinzuzufügen, wodurch die Schaltfläche den Platzhalter abdeckt.

Langer Name

Bei diesem Design schwebt das Bild nach links und der Name des Autors steht auf der rechten Seite. Was passiert, wenn die Informationen rechts zu lang sind? Es besteht kein Zweifel, dass das Layout zusammenbrechen wird.

Das Problem hierbei besteht darin, dass wir das Bild nur nach links verschoben haben, wodurch der Name des Autors daneben verschoben wird. Dies funktioniert jedoch nur gut, wenn der Name des Autors kurz ist.

Um das Seitenlayout anpassbarer zu gestalten, müssen wir die Breite beider Elemente erhöhen. Ein empfehlenswerterer Ansatz ist die Verwendung von Flexbox, das für kleine Komponenten wie diese besser geeignet ist.

Der Artikel enthält lange Links/Wörter

Manchmal enthalten Artikel sehr lange Hyperlinks oder Wörter, die bei einem breiten Ansichtsfenster möglicherweise keine Probleme verursachen. Auf kleineren Geräten wie Mobiltelefonen 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-Worttrennungen

.Artikel-Text p {
  Wörtertrennung: alles trennen;
}

Die Wörtertrennungseigenschaft verhält sich in verschiedenen Browsern unterschiedlich und muss daher bei Verwendung umfassend getestet werden.

2) Fügen Sie dem äußeren Element Überlauf und Textüberlauf hinzu

.Artikel-Text p {
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
}

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

Zu lange Artikel-Tags

Wenn wir ein Artikellabel auf einer Karte platzieren, passen wir die Größe idealerweise einfach durch Festlegen der Polsterung an. Wenn der Inhalt des Etiketts zu lang ist, kann das Festcodieren der Höhe und Breite dazu führen, dass das Layout zusammenbricht.

Sie können auch eine Mindestbreite für das Etikett festlegen. Wenn Sie das Attribut „min-width“ auf das von „padding“ umschlossene Inhaltselement des Etiketts anwenden, ändert sich die Breite dynamisch und das Problem ist gelöst.

Abschnittsüberschrift mit Permalink

Dieses Beispiel enthält rechts neben der Absatzüberschrift einen Link „Mehr anzeigen“. Es gibt verschiedene Möglichkeiten, CSS zu schreiben. Eine davon besteht darin, die absolute Positionierung für Links zu verwenden.

Dies kann zu Problemen führen, wenn der Titel zu lang ist. Eine bessere Lösung ist die Verwendung eines Flexbox-Layouts, das den Link automatisch in die nächste Zeile drückt, wenn nicht genügend Platz vorhanden ist.

.header-2 {
  Anzeige: Flex;
  Flex-Wrap: Umwickeln;
  Inhalt ausrichten: Abstand dazwischen;
  Elemente ausrichten: zentrieren;
}

Die oben beschriebene Technik wird als „ausgerichtete mobile Parzellen“ bezeichnet.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.