Füllung div mit Buchstabenabstand
Das Problem, das ich habe, ist das Füllen eines div mit Text mit letter-spacing . Das Hauptproblem ist, ich kenne die Breite von div nicht.
Zuerst dachte ich daran, text-align= justify zu benutzen, aber seit dem bin ich im Dunkeln gelaufen und habe keine Ahnung, wie ich das lösen könnte. Ich schätze, einige Scripting-Magie könnte den Trick machen.
Ein imgur link, der dir eine Idee gibt, was ich meine:
Hier ist ein Link, der ein Beispiel zeigt; JSfiddle .
5 Antworten
Basierend auf dem Kommentar des Posters scheint JavaScript kein Problem zu sein. Hier ist ein möglicher Ansatz, um das Problem mit jQuery zu lösen:
%Vor%Aktualisieren
Kleine Optimierung, wenn der Wrapper zu klein wird: JSFiddle 2
Das könnte helfen:
%Vor%Hinweis: Wenn der Buchstabenabstand 0 ist, müssen Sie die Methode replace nicht verwenden. Oder Sie können Buchstabenabstand hinzufügen: 1px; zu Ihrer CSS-Datei.
Um einen Überlauf zu vermeiden, geben Sie immer die Minuszahl an die Höhe des Elternelements an, damit die Arbeit korrekt ausgeführt wird.
Ein anderer Ansatz, den ich für diese Frage geschrieben habe Text auf die Breite von div. strecken . Es berechnet und verwendet Buchstabenabstand, so dass der Text den gesamten verfügbaren Platz in seinem Container verwendet beim Laden der Seite und bei der Fenstergrößenänderung :
HTML:
%Vor%jQuery:
%Vor%CSS:
%Vor%Eine andere Lösung, wenn Sie nicht semantisch sein müssen (weil Sie viele Spannen bekommen), ich meine, wenn Sie nur das visuelle Ergebnis brauchen, ist flexbox zu verwenden.
Sie haben also Ihre <div id="#myText">TEXT 1</div>
Wir müssen das bekommen:
%Vor%Also können Sie CSS anwenden:
%Vor%Um den Text in einen Bereich zu transformieren, können Sie jQuery oder was auch immer verwenden. Hier mit jQuery:
%Vor%Um bessere Ergebnisse zu erzielen, entfernen Sie den Buchstabenabstand: 0 in #myText, damit jeder zusätzliche Abstand angewendet wird.
Tags und Links javascript html css letter-spacing