Vertikale Textausrichtung

Question

Ich habe versucht, den Text vertikal auszurichten, wie es in MS-Word-Tabellen möglich ist, aber bisher konnte ich nur DIESE ... die ich nicht glücklich mit, weil es ein Feld gedreht ist ... Gibt es nicht eine Möglichkeit, tatsächlich vertikale Richtung Text haben?

In der Demo habe ich die Drehung nur auf 305 Grad eingestellt, wodurch der Text nicht vertikal ist. 270deg wird, aber ich habe die Demo nur gemacht, um die Rotation zu zeigen.

Answer 1

Alternativer Ansatz: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

Answer 2

-webkit-transform: rotate(90deg);

Die anderen Antworten sind zwar richtig, aber sie führten zu einigen Ausrichtungsproblemen. Beim Ausprobieren verschiedener Dinge hat dieser CSS-Code für mich perfekt funktioniert.

.vertical{
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
}

Answer 3

Ich war auf der Suche nach einem echten vertikalen Text und nicht nach einem gedrehten Text in HTML, wie unten gezeigt. Dies konnte ich mit der folgenden Methode erreichen.

HTML:-

<p class="vericaltext">
Hi This is Vertical Text!
</p>

CSS:-

.vericaltext{
 writing-mode: vertical-lr;
 text-orientation: upright;
}

JSFiddle DEMO

\======================= OLD Antwort ==========================

HTML:-

<p class="vericaltext">
Hi This is Vertical Text!
</p>

CSS:-

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
}

JSFiddle! Demo.

Aktualisierung:- Wenn Sie die Leerräume angezeigt werden soll, dann fügen Sie die folgende Eigenschaft zu Ihrem CSS hinzu.

white-space: pre;

Die css-Klasse soll also lauten

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space: pre;/* this is for displaying whitespaces */
}

JSFiddle! Demo mit Whitespace

Aktualisierung 2 (28-JUN-2015)

Seit white-space: pre; nicht zu funktionieren scheint (für diese spezielle Verwendung) auf Firefox (ab jetzt), ändern Sie einfach diese Zeile zu

white-space: pre-wrap;

Die css-Klasse soll also lauten

.vericaltext{
    width:1px;
    word-wrap: break-word;
    font-family: monospace; /* this is just for good looks */
    white-space:pre-wrap; /* this is for displaying whitespaces including Moz-FF.*/
}

JsFiddle Demo FF-kompatibel.

Answer 4

So drehen Sie den Text um 90 Grad:

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

Außerdem scheint es, dass das span-Tag nicht gedreht werden kann, ohne auf display:block eingestellt zu sein.

Answer 5

Um Text vertikal (von unten nach oben) anzuzeigen, können wir einfach verwenden:

writing-mode: vertical-lr; 

transform: rotate(180deg);

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}

<div id="myDiv"> 

<span id="mySpan"> Here We gooooo !!! </span>

</div>

Beachten Sie, dass wir dies hinzufügen können, um Browser-Kompatibilität zu gewährleisten:

-webkit-transform: rotate(180deg);   
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);

können wir auch mehr lesen über writing-mode Eigentum hier auf Mozilla-Dokumente.