mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 24.04.2024 00:53 Benutzername: Passwort: Auto-Login

Thema: Text verkleinern, sobald breiter als Elternelement vom 20.03.2018


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Text verkleinern, sobald breiter als Elternelement
Autor Nachricht
Seeker_44
Threadersteller

Dabei seit: 15.09.2009
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 20.03.2018 22:06
Titel

Text verkleinern, sobald breiter als Elternelement

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen

Es gibt Javascripts, die Text entsprechend des Viewports oder des Elternelements verkleinern und vergrössern. Es gibt inzwischen sogar responsive Einheiten für font-size (vw, vh, vmin, vmax).

Ich suche jedoch nach einer responsiven Lösung für Schriftgrössen mit ganz bestimmten Verhaltensweisen, die ich so leider noch nirgends gefunden habe:

Die Schrift soll so gross angezeigt werden, wie ich sie im CSS via font-size definiert habe, unabhängig vom Viewport. Erst wenn ich den Viewport so stark verkleinere, bis responsive Elternelemente so schmal werden, dass das Wort darüber hinausragt, soll der Text verkleinert werden, damit die Wörter in die Breite des Elternelements passen.

Jetzt kommt der knifflige Teil: Die Wörter im Text sollen unbedingt zuerst auf die nächsten Zeile umgebrochen werden, bevor eine Verkleinerung stattfindet. Erst wenn trotz des automatischen Umbruches noch Worte breiter sind als das Elternelement, soll der ganze Text so stark verkleinert werden, dass er im Elternelement wieder Platz findet.

Und es geht noch weiter: Ich habe ein tolles Javascript namens "Hyphenator" gefunden, welches Silbentrennungen einfügt. Ich setze es gerne ein. Das Text-Verkleinerungs-Script soll, wenn es irgendwie möglich ist, nicht schon dann damit beginnen, die Schrift zu verkleinern, wenn die automatischen Umbrüche stattgefunden haben, wie weiter oben beschrieben, sondern sogar erst, wenn auch die Silbentrennung durch ist. So bleibt die Schrift so lange wie möglich in ihrer Originalgrösse, bevor schlussendlich nichts mehr geht und sie verkleinert werden muss, um nicht über das Elternelement zu ragen.

Ich hoffe, ich habe mich verständlich ausgedrückt. Wenn ich es anders erklären soll, gebt mir bitte Bescheid.

Ist so etwas technisch machbar?
  View user's profile Private Nachricht senden
hadouken

Dabei seit: 07.11.2015
Ort: -
Alter: -
Geschlecht: -
Verfasst So 29.04.2018 13:16
Titel

Antworten mit Zitat Zum Seitenanfang

Ja.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
 
Ähnliche Themen [WP] Elternelement
float und elternelement
css: margin beeinflusst elternelement
[css] div(float: right) vertikal im elternelement zentrieren
2 Divs nebeneinander die zum Elternelement relativ sind?
Grafik breiter als div-Container?
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.