css3 - text stretch

Computer: Software & Programmierung HTML & CSS
#1

Liebe/-r Experte/-in,

ich habe folgendes TAG:

lorem ipsum

ich möchte (evtl. mit HTML5-Mitteln) erreichen, dass der Text den Inhalt des DIVs ganz ausfüllt,
d.h. der Text so weit gestreckt und größer gemacht wird, bis dieser Text mein DIV ausfüllt.

Mein Ziel ist es zu erreichen, dass der Inhalt 100% des DIVs einnimmt.
(wie z.B. mit kann man erreichen,
dass die Tabelle den ganzen zur Verfügung stehenden Platz einnimmt)

Gibt es solche Style-Attribute, die eine Ausdehnung des Textes bewirken? Oder gibt es eine Lösung mit JavaScript?

Für einen Hinweis wäre ich dankbar!
Ilona

#2

Hallo Ilona,

dies ist eine nette Aufgabenstellung, aber leider über CSS nicht lösbar. Daher gehe ich davon aus, dass es auch mit JS keine akzeptable Lösung gibt. Mit Flash könnte das gewünschte Verhalten umgesetzt werden.

LG aus Linz

#3

Hallo,

der Inhalt passt sich der Größe des DIV Feldes an.
Wenn nicht gesuchte Lösung ist, wüsste ich als Lösung nur folgendes :

  • Schriftgröße im DIV ändern (font-size)
  • gestreckte Schriftart wählen (font-family)
  • oder Buchstabenabstand ändern (letter-spacing)

Zu letter-spacing siehe auch hier :
http://www.css4you.de/Texteigenschaften/letter-spaci…

Hoffe die Ansätze halfen weiter

#4

Hallo Ilona,

wenn ich das richtig verstehe, möchtest du, dass der Browser eine Skalierung des Textes vornimmt?

Erstmal: HTML5 ist HTML5. Weder CSS3 noch jQuery oder JavaScript-APIs.

HTML ist nur für die Struktur gedacht, daher kann HTML5 auch gar nicht das Aussehen bzw. die Interaktion beeinflussen.

Zum anderen: CSS-Befehle sollten auf gar keinen Fall (danke erstmal, dass du mit divs und nicht mit Tabellen arbeitest :smiley:) in den HTML-Code. Dafür gibt es externe CSS-Dateien, die man im head einbinden kann.

Zu deinem Problem (endlich :smiley:):

Hab das hier (http://docs.jquery.com/UI/Effects/Scale) bei jQuery gefunden, bin mir aber nicht sicher, ob das auch für Text funktioniert (müsste eigentlich, einfach mal ausprobieren).

Ansonsten gibt es hier (http://plugins.jquery.com/plugin-tags/text-scale) noch ein Plugin für jQuery, dass den Text skaliert. Vielleicht kannst du das passend umschreiben, falls es noch den falschen Bezugspunkt (z.B. viewport) hat.

Eine konkrete Lösung fällt mir auf Anhieb nicht ein, es geht nur über JavaScript. Ich müsste da genauso Googeln.

MfG, Florian J.

#5

Hallo Florian,

vielen Dank für die Hinweise!!!

Ich habe beide jQuery-Plugins ausprobiert, beide schienen verdächtig-gut zu sein!
Leider bin ich enttäuscht worden:

  1. „UI/Effects/Scale“ skaliert zwar, aber
    den Faktor müsste ich ausrechnen. Aber leider weiss ich es in JavaScript nicht, wie groß die Skalierung sein sollte, um mein exakt voll auszufüllen!?

  2. „plugins.jquery.com/plugin-tags/text-scale“
    täte genau das, was ich wünschte (allerdings nur für die Höhe, nicht für die Breite (es heisst ja „Fit Text to Height“). Aber dieses Plugin kann Text nur kleiner machen, falls nicht passt. Ich bräuchte es aber umgekehrt: der Text müsste gedehnt werden, um den ganzen -Bereich auszufüllen.

Folge: trotz Deiner Hinweise scheint es so, als wäre mein Plan nicht umsetzbar!
Schade.

Nochmal vielen Dank:
Ilona