Wie wird Text in voller Breite seines Containers angezeigt?

8

Sagen Sie dem Div 300px der Breite, wie würde ich die Schriftgröße des Textes einstellen, so dass es immer 100% der Breite dauern würde, wenn man bedenkt, dass der Text nie dieselbe Länge hat (der Text ist ein dynamischer Titel) generiert von php). Kleiner Text müsste eine Schrift viel kleiner als der größere Text, usw. haben

    
Joe Frambach 09.07.2013, 00:35
quelle

5 Antworten

12

das hat den Trick für mich

gemacht %Vor%

Mit diesem Trick musste ich jedoch die Höhe meines Elements erzwingen, um zu verhindern, dass es eine neue leere Zeile hinzufügt.

Ich habe diese Antwort von Force single genommen Textzeile im Element, um die Breite mit CSS zu füllen

Siehe auch Erklärungen: Ссылка

    
svassr 21.10.2014 23:15
quelle
10

Was Sie fragen, kann wahrscheinlich nicht getan werden. Mit text-align:justify wird der Absatztext auf die rechte Seite erweitert, aber Sie können die Größe eines Headers nicht auf 100% der Breite einstellen.

Edit: Nun, tatsächlich existiert eine JS-Bibliothek, die das zu tun scheint. Ссылка . Dennoch ist keine pure-CSS-Lösung verfügbar.

    
apartridge 09.07.2013 00:38
quelle
0

Ich habe dafür eine Webkomponente erstellt:
Ссылка

Schau dir die Demo hier an:
Ссылка

Die Verwendung ist wie folgt:

%Vor%     
pomber 29.10.2016 22:16
quelle
0

Ich habe eine einfache Skalierungsfunktion mit CSS-Transformation anstelle der Schriftgröße vorbereitet.

Blogpost: Ссылка

Der Code:

%Vor%

Arbeitsdemo: Ссылка

    
Maciej Korsan 07.03.2017 10:59
quelle
0

Die Lösung von @svassr kombiniert mit font-size: *vw hat mir das gewünschte Ergebnis gebracht. Also:

%Vor%

vw steht für viewport width , in diesem Beispiel 4,3% der Breite des Ansichtsfensters. Spielen Sie damit herum, um Ihren Text auf eine Zeile zu bringen. In Kombination mit @ svassrs Lösung hat das für mich wie ein Zauber gewirkt!

    
patrick 03.04.2018 11:42
quelle

Tags und Links