Share
Heute morgen musste ich vertikalen Text für ein Projekt erstellen, an dem ich gerade arbeite. Nachdem ich ein paar Ideen ausprobiert hatte, ging ich zu Twitter, um herauszufinden, welche Gedanken unsere Anhänger zu diesem Thema hatten. Es gab viele großartige Antworten und Ideen, die wir heute besprechen werden!
* Hinweis - Weitere Informationen zur ordnungsgemäßen Verwendung finden Sie unter "Methode 6".Abonniere unsere YouTube-Seite, um alle Video-Tutorials anzusehen!
Sehen Sie sich dieses Video lieber auf Screenr an?
Accentsconagua
Ein möglicher (jedoch nicht empfohlener) Weg, um vertikalen Text zu erzielen, ist das Hinzufügen
N
E
T
T
U
T
S
Verwenden Sie diese Methode nicht. Es ist lahm und schlampig.
Bei dieser Methode wickeln wir jeden Buchstaben in einem Bereich ein und legen dann seinen Buchstaben fest Anzeige zu Block in unserem CSS.
Vertikaler Text N E T T U T S
Das Problem bei dieser Lösung - abgesehen von der erschreckenden Auszeichnung - besteht darin, dass es sich um einen manuellen Prozess handelt. Wenn der Text dynamisch aus einem CMS generiert wird, haben Sie kein Glück. Verwenden Sie diese Methode nicht.
Mein anfänglicher Instinkt war, das dynamisch hinzuzufügen Spanne Tags mit JavaScript. Auf diese Weise umgehen wir die in der zweiten Methode genannten Probleme.
JS Bin NETTUTS
Diese Methode ist definitiv eine Verbesserung. Oben wir Teilt den Text in ein Array und wickeln Sie dann jeden Buchstaben in ein Spanne. Während wir so etwas wie ein verwenden könnten zum Aussage oder $ .map Um durch das Array zu filtern, besteht eine weitaus bessere und schnellere Lösung darin, den Text gleichzeitig manuell zu verbinden und zu umbrechen.
Diese Lösung ist zwar nicht besser, wird jedoch nicht empfohlen.
Lassen Sie uns von JavaScript weg, wenn wir können. Was wäre, wenn wir dem Containerelement eine Breite zuweisen und den Text zwingen würden, den Text zu umbrechen? Das könnte funktionieren.
JS Bin NETTUTS
In diesem Szenario wenden wir eine sehr schmale Breite an h1 tag und dann machen Schriftgröße gleich diesem genauen Wert. Zum Schluss mit der Einstellung Zeilenumbruch gleich bruchwort, Wir können jeden Buchstaben in eine eigene Zeile zwingen. jedoch, Zeilenumbruch: Break-Word ist Teil der CSS3-Spezifikation und nicht mit allen Browsern kompatibel.
Abgesehen von älteren Browsern löst dies scheinbar unser Problem… aber nicht vollständig. Die obige Demo scheint zu funktionieren, aber es ist zu riskant, mit Pixelwerten zu spielen. Versuchen wir etwas, das so einfach ist, wie aus Großbuchstaben Kleinbuchstaben zu machen.
Yikes; Bei dieser Methode müssen wir sehr vorsichtig sein, wenn es um die spezifischen Werte geht, die wir festlegen. Nicht empfohlen.
Buchstaben-Abstand Als Vorsichtsmaßnahme und um Methode vier zu erweitern, wenden wir die Anwendung nicht zu groß an Buchstaben-Abstand um dieses Problem zu umgehen?
JS Bin Nettuts
Das scheint das Problem zu beheben, obwohl wir hier ein wenig CSS3 verwenden.
ems Alternativ gibt es eine Einliner-Lösung. Erinnern Sie sich, wann wir das Anwenden gelernt haben Überlauf versteckt würde ein Elternelement auf wundersame Weise dazu führen, dass es seine Schwimmer enthält? Diese Methode ist so ähnlich! Der Schlüssel ist zu verwenden ems, und fügen Sie zwischen jedem Buchstaben ein Leerzeichen ein.
JS Bin N e t t u ts
Ziemlich ordentlich, richtig? Auf diese Weise können Sie jede gewünschte Schriftgröße anwenden. Weil wir verwenden ems - was dem gleich ist x-Höhe der gewählten Schriftart - wir haben dann viel mehr Flexibilität.
Aber, Manchmal landen mehr als ein Buchstabe in einer Zeile. Du musst in Sicherheit sein. deshalb habe ich mich beliebig groß beworben Buchstaben-Abstand um sicherzustellen, dass sich niemals mehr als ein Buchstabe in einer Zeile befindet.
Meines Wissens zu diesem Zeitpunkt ist dies die beste, Browser-konformeste Lösung.
Whitespace Ein letzter Weg, um diesen Effekt zu erzielen, besteht darin, die Vorteile der Leerraum Eigentum.
J E F F R E Y
Indem man es einstellt Leerraum zu Vor, das weist den Text an, sich so zu verhalten, als befände er sich in einem Vor Etikett. Daher werden alle von Ihnen hinzugefügten Abstände berücksichtigt.
Sollte es nicht eine CSS3-Regel geben, um diese Aufgabe auszuführen? Was wäre, wenn ich etwas wie folgt setzen könnte: Schriftdarstellung: Briefblock; das würde jeden Buchstaben anweisen, als eine Art Block dargestellt zu werden?
Was denkst du? Haben Sie andere Alternativen, die wir berücksichtigen sollten? Viele Leute schlugen vor, Textrotation zu verwenden, um die Aufgabe zu erledigen, aber es ist wichtig zu wissen, dass dies auch den Text um neunzig Grad dreht, was wir jedoch nicht erreichen wollen.
