Umgang mit langen und unerwarteten Inhalten in CSS

Wenn wir CSS schreiben, vergessen wir manchmal einige Randfälle in den Designs. Wenn beispielsweise der Inhalt länger ist als erwartet und wir diese Möglichkeit nicht berücksichtigt haben, kann unser Design brechen. Wir können nicht garantieren, dass unser CSS immer wie erwartet funktioniert, aber zumindest können wir dies durch das Testen verschiedener Inhaltstypen reduzieren.

Wenn Sie CSS codieren, schreiben Sie abstrakte Regeln, um unbekannte Inhalte auf einem unbekannten Medium zu organisieren. – Keith J. Grant

In diesem Artikel werden wir verschiedene UI-Fehler von realen Websites durchgehen, damit wir sie von Anfang an berücksichtigen können. Bereit? Los geht's!

Ein Button mit einem Symbol auf der rechten/linken Seite

Dies ist ein Toggle-Button für ein Akkordeon. Auf der rechten Seite befindet sich ein Symbol, das hervorhebt, dass es klickbar ist. Wenn der Bereich jedoch nicht groß genug ist, überlappt der Text das Symbol. Dies kann passieren, wenn wir keinen langen Inhalt berücksichtigen.

Eine Lösung wäre, dem rechten Bereich ausreichend Polsterung hinzuzufügen, um die Größe des Symbols unterzubringen

.button {
  padding-right: 50px;
}

Beachten Sie, wie die Erhöhung der Polsterung einen sicheren Bereich für das Symbol schafft. Jetzt können wir sicher sein, dass es nicht abbricht, wenn der Text länger wird.

Siehe den Pen Ein Button mit einem Symbol von Ahmad Shadeed (@shadeed) auf CodePen.

Input-Platzhalter

Wenn wir das Float-Label-Muster für unsere Formulare verwenden, insbesondere mit einem Button auf der rechten Seite. Wir sollten dies gründlich testen, um Probleme zu vermeiden, wenn das Label zu lang ist.

Eine Lösung wäre, dem Button position: relative hinzuzufügen. Dadurch wird er über das Label verschoben.

Siehe den Pen Langer Platzhalter von Ahmad Shadeed (@shadeed) auf CodePen.

Lange Namen

Bei diesem Design ist das Bild links gefloatet und wir haben rechts einen Autorennamen. Was passiert, wenn der Name länger als erwartet ist? Die Benutzeroberfläche bricht.

Das Problem ist, dass wir nur das Bild nach links gefloatet haben. Dies kann dazu führen, dass der Autorenname daneben gerückt wird. Dies funktioniert jedoch nur, wenn der Name nicht lang ist.

Um es robuster zu machen, sollten wir das Autorenbild floaten und dem Wrapper des Autornamens overflow: hidden hinzufügen. So erhalten wir den Vorteil des Block-Formatierungskontexts (dank Thierry Koblentz, der darauf in den Kommentaren hingewiesen hat). Oder als weitere Lösung verwenden Sie Flexbox, da sie für diese kleine Komponente geeignet ist.

Siehe den Pen Langer Personenname von Ahmad Shadeed (@shadeed) auf CodePen.

Lange Links/Wörter in einem Artikeltext

Manchmal gibt es lange Links oder Wörter in einem Artikel. Das verursacht möglicherweise kein Problem bei einer sehr breiten Ansicht. Aber für kleinere Größen wie auf Mobilgeräten oder Tablets führt dies zu horizontalem Scrollen, was störend ist.

Wir haben zwei Lösungen für ein solches Problem

1) CSS word-break verwenden

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

Bitte testen Sie gründlich, wenn Sie word-break verwenden, da es Unterschiede zwischen den Browsern gibt. Wir empfehlen Ihnen, diesen Artikel zu diesem Thema zu lesen.

2) overflow zum Wrapper-Element und text-overflow zu den Links hinzufügen

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

Diese Lösung ist sicherer und besser für Links. Aber für Wörter würde ich word-break verwenden.

Siehe den Pen Lange Links / Wörter von Ahmad Shadeed (@shadeed) auf CodePen.

Lange Artikel-Tags

Wenn wir einen Artikel-Tag über eine Karte legen, sollten wir nur Polsterung für den Abstand hinzufügen. Die Bestimmung von Breite und Höhe kann die Benutzeroberfläche unterbrechen, wenn der Tag-Inhalt zu lang ist.

Wenn Sie eine Mindestbreite für den Tag haben möchten, ist das in Ordnung. Wir können min-width mit Polsterung um den Tag-Inhalt herum verwenden. So wird die Breite dynamisch und das Problem ist gelöst.

Siehe den Pen Lange Artikel-Tags von CSS-Tricks (@css-tricks) auf CodePen.

Abschnittsüberschrift mit einem Link

In diesem Beispiel haben wir einen Abschnittstitel zusammen mit einem "Mehr anzeigen"-Link auf der rechten Seite. Es gibt verschiedene Möglichkeiten, dies in CSS zu codieren, eine davon ist die absolute Positionierung des Links.

Dies führt zu Problemen, falls der Titel zu lang war. Eine bessere Lösung könnte die Verwendung von Flexbox sein. So wird der Link automatisch in eine neue Zeile verschoben, wenn nicht genügend Platz vorhanden ist.

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

Die obige Technik wird als „Alignment Shifting Wrapping“ bezeichnet. Ich habe sie vor zwei Jahren in diesem Artikel gelernt.

Siehe den Pen Abschnittsüberschrift mit einem Link von Ahmad Shadeed (@shadeed) auf CodePen.

Fazit

Ich habe auf die harte Tour gelernt, dass die Verwendung von Dummy-Inhalten oder das einfache Hinzufügen von Dingen nach dem Zufallsprinzip nicht ausreicht. Wir sollten alle Arten von Inhalten zu unseren Layouts hinzufügen, bis etwas bricht. Ich verwende gerne Heydon Pickerings forceFeed.js, um zufällig Inhalte zu einer bestimmten Komponente hinzuzufügen.