Nicht umbrechende Texte responsive gestalten
Bei manchen Tags werden die Texte standardmäßig nicht umgebrochen, wenn der Anzeigebereich kleiner als die Breite des Texts ist. Das ist z.B. bei Hyperlinks (A-Tag) oder vorformatierten Texten (PRE-Tag) der Fall. Ist der Text länger als die Breite des Anzeigebereichs, werden automatisch Scrollleisten eingeblendet. Dadurch ist die Seite nicht in vollem Umfang responsive.
Einige Lösung bei nicht umbrechenden Texten
Eine allgemeingültige Lösung für solche Effekte gibt es nicht, da es immer davon abhängt, welche Tags man einsetzt und welche Entscheidung man für den Fall treffen möchte, dass die Anzeigebreite kleiner als der Text ist. Einige Lösungsmöglichkeiten wären folgende.
- Schriftgröße bei geringen Breiten verkleinern
- Texte umbrechen lassen
- Automatisch Scrollleisten einblenden
- Bedingte Trennstriche bei den Texten einfügen
Schriftgröße bei kleinen Anzeigebereichen verkleinern
Diese Methode ist nicht unbedingt sinnvoll. Denn, Texte können unterschiedlich lang sein und wenn man sicherstellen möchte, dass die Texte auch bei kleinen Displays ohne Scrollen sichtbar sind, müsste man als Maßstab den längsten nicht umbrechenden Text nehmen und die Schriftgröße danach orientieren. Herauskommen würde mit hoher Wahrscheinlichkeit eine Schriftgröße, mit der die Texte kaum bzw. gar nicht mehr lesbar wären.
Texte umbrechen lassen
Eine gute Methode ist, die Texte automatisch umbrechen zu lassen. Allerdings ist das nur bei bestimmten Texten sinnvoll, z.B. bei Hyperlinks. Fließtexte zum Lesen sind eher nicht dafür geeignet, da der Text dadurch nicht schön zu lesen wäre. Ein CSS-Code als Beispiel, um z.B. den Text bei Hyperlinks umbrechen zu lassen.
a {
word-wrap: break-word;
}Automatisch Scrollleisten einblenden lassen
In manchen Fällen kann es sinnvoll sein, bei den Elementen automatisch Scrollleisten einblenden zu lassen, wenn der Text größer als der Anzeigebereich ist. Die Seite bleibt dadurch im Grunde responsive, da die Scrollleisten nicht für die gesamte Seite gelten, sondern nur für das Element. Beispielsweise werden vorformatierte Texte (PRE-Tag) häufig dafür verwendet, um Programmiercode auf der Webseite darzustellen. Würde man den Text umbrechen lassen, wäre der Programmiercode schwieriger zu lesen. In solchen Fällen könnten Scrollleisten die bessere Variante sein, wenn der Anzeigebereich kleiner als der Text ist. Nachfolgend als Beispiel ein CSS-Code für den PRE-Tag.
pre {
overflow: auto;
}Die automatische Einblendung der Scrollleisten ist nur bei Block- und Inline-Block-Elementen anwendbar. Möchte man es z.B. auch bei Inline-Elementen anwenden, kann man für das Element den CSS-Code display: block; oder display: inline-block; hinzufügen und probieren, ob es klappt und welche weiteren Effekte dadurch eintreten.
Bedingte Zeilenumbrüche mit Trennzeichen
Eine aufwändige Variante sind bedingte Zeilenumbrüche mit Trennzeichen. Hierbei wird mit dem SHY-Tag (wie bei der Silbentrennung) ein bedingter Zeilenumbruch eingefügt. Ist der Anzeigebereich groß genug, bleibt der Text zusammen. Ist der Anzeigebereich zu klein, wird an der Stelle, an der ein SHY-Tag eingefügt wurde, ein Zeilenumbruch mit einem Trennzeichen erzeugt. Da man bei dieser Variante nur einzelne Wörter umbrechen lassen kann, eignet sie sich nur, um bei bestimmten Wörtern bedingte Zeilenumbrüche einzufügen. Für ganze Textpassagen wäre es zu aufwendig.