Textgröße dynamisch an DIV anpassen



  • Hallo Zusammen,
    ich habe gerade folgendes Problem :

    - Ich habe ein Div Element mit einer fixen Weite, z.B. 50%
    - In dieses Element wird per PHP und MySQL ein Text geladen von unbestimmter Länge, somit kann es ein einfach "Hallo" sein, oder ein halber Roman

    Nun würde ich gerne die Schriftgröße der Textlänge anpassen d.h. ein einziges Wort ist entsprechend größer dargestellt, als ein ganzer Text. Somit würde ich gerne die Schriftgröße des Textes so anpassen, dass der Text gut in die Box passt.
    Ich hoffe ihr versteht mein Problem,

    - Grüße


  • Mod

    Hi.

    Das geht leider nicht direkt. Du kannst 2 Ansätze verfolgen:

    1. du zählst die Buchstaben und setzt dementsprechend eine passende Schriftgröße. Das ist natürlich nicht 100% perfekt, aber schnell machbar und sieht gut aus.

    2. du setzt ein div off screen mit deiner fixen breite und schreibst den Text rein, dann schaust du dir die Höhe an. Wenn die Höhe zu hoch ist, dann verringerst du die Schriftgröße und schaust nach ob die Höhe jetzt passt. Wenn nicht, wieder Schriftgröße kleiner.

    Als fallback kannst du text-overflow:ellipsis; setzen und per Tooltip den gesamten Content anzeigen wenn der User hovert oder drauf klickt.



  • Vielen Dank für den Tipp mit "text-overflow: ellipsis". Ich kannte dies noch nicht und ist auch mehr oder minder genau das wonach ich gesucht habe und auch nicht so umständlich 😉


Anmelden zum Antworten