Ich habe versucht , Text in einer vertikalen Richtung zu gehen , wie wir in MS-Word - Tabellen tun können , aber bisher habe ich nur in der Lage gewesen zu tun THIS ... was ich nicht glücklich bin mit , weil es eine Box gedreht ... Isn‘ Gibt es eine Möglichkeit, tatsächlichen Text in vertikaler Richtung zu erhalten?

Ich habe die Drehung in der Demo nur auf 305 Grad eingestellt, wodurch der Text nicht vertikal wird. 270degwill aber ich habe nur die demo gemacht um rotation zu zeigen.

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

p { writing-mode: tb-rl; }

-webkit-transform: rotate(90deg);

Die anderen Antworten sind richtig, führten jedoch zu einigen Ausrichtungsproblemen. Beim Ausprobieren verschiedener Dinge funktionierte dieser CSS-Stückcode perfekt für mich.

.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;
}

Ich habe nach einem tatsächlichen vertikalen Text gesucht und nicht nach dem gedrehten Text in HTML, wie unten gezeigt. So konnte ich es mit der folgenden Methode erreichen.

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.

Update: - Wenn die Leerzeichen angezeigt werden sollen, fügen Sie Ihrem CSS die folgende Eigenschaft hinzu.

white-space: pre;

Also soll die CSS-Klasse sein

.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 Leerzeichen

Update 2 (28. Juni 2015)

Da white-space: pre;es (für diese spezielle Verwendung) unter Firefox (ab sofort) nicht zu funktionieren scheint, ändern Sie einfach diese Zeile in

white-space: pre-wrap;

Also soll die CSS-Klasse sein

.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.

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);

Es scheint auch, dass das span-Tag nicht gedreht werden kann, ohne auf display: block eingestellt zu sein.

Für vertikalen Text mit Zeichen untereinander in Firefox verwenden Sie:

text-orientation: upright;
writing-mode: vertical-rl;

Versuchen Sie es mit:

writing-mode: lr-tb;

Um Text vertikal (unten-oben) anzuzeigen, können Sie einfach Folgendes 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 die Browserkompatibilität sicherzustellen:

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

Weitere Informationen zu writing-modeImmobilien finden Sie hier in den Mozilla-Dokumenten.

Ich bin neu in diesem Bereich, es hat mir sehr geholfen. Ändern Sie einfach Breite, Höhe, oben und links, damit es passt:

.vertical-text {
display: block;
position:absolute;
width: 0px;
height: 0px;
top: 0px;
left: 0px;
transform: rotate(90deg);
}

Sie können auch hierher gehen und einen anderen Weg sehen, dies zu tun. Der Autor macht es so:

.vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}

Rotation ist wie Sie der richtige Weg - aber beachten Sie, dass dies nicht von allen Browsern unterstützt wird. Wenn Sie keine browserübergreifende Lösung erhalten möchten, müssen Sie dafür Bilder erstellen.

Kann die CSS3-Transformationseigenschaft verwenden

.txtdiv{
  transform:rotate(7deg);
  -ms-transform:rotate(7deg); /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
  -webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}

Fügen Sie die Klasse hinzu

.rotate {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);

}

Ich benutze das so ziemlich jeden Tag und hatte keinerlei Probleme damit.

https://css-tricks.com/snippets/css/text-rotation/

Ich habe es geschafft, eine funktionierende Lösung damit zu haben:

(Ich habe einen Titel innerhalb einer Mittelklasse-Klasse div)

.middleItem > .title{
    width: 5px;
    height: auto;
    word-break:break-all;
    font-size: 150%;
}

Hier ist ein Beispiel für einen SVG-Code, mit dem ich drei Zeilen vertikalen Text in eine Tabellenspaltenüberschrift eingefügt habe. Andere Winkel sind mit ein wenig Optimierung möglich. Ich glaube, die meisten Browser unterstützen heutzutage SVG.

<svg height="150" width="40">
  <text font-weight="bold" x="-150" y="10" transform="rotate(-90 0 0)">Jane Doe</text>
  <text x="-150" y="25" transform="rotate(-90 0 0)">0/0&nbsp;&nbsp;&nbsp;&nbsp;0/0</text>
  <text x="-150" y="40" transform="rotate(-90 0 0)">2015-06-06</text>
  Sorry, your browser does not support inline SVG.
</svg>

Sie können dasselbe mit den folgenden CSS-Eigenschaften erreichen:

writing-mode: vertical-rl;
text-orientation: upright;

Die beste Lösung wäre die Verwendung von writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Es definiert, ob Textzeilen horizontal oder vertikal angeordnet sind und in welche Richtung die Blöcke fortschreiten.

Es hat eine gute Browserunterstützung, funktioniert aber nicht mit IE8 (wenn Sie sich für IE interessieren) http://caniuse.com/#feat=css-writing-mode

.vertical-text {
    transform: rotate(90deg);
    transform-origin: left top 0;
    float: left;
}

<!DOCTYPE html>
<html>
    <style>
        h2 {
           margin: 0 0 0 0;
           transform: rotate(270deg);
           transform-origin: top left;
           color: #852c98;
           position: absolute;
           top: 200px;
        }
    </style>
    <body>
        <h2>It’s all in the curd</h2>
    </body>
</html>

Wenn Sie eine Ausrichtung wie möchten

S
T
A
R
T

Folgen Sie dann https://www.w3.org/International/articles/vertical-text/#upright-latin

Beispiel:

div.vertical-sentence{
  -ms-writing-mode: tb-rl; /* for IE */
  -webkit-writing-mode: vertical-rl; /* for Webkit */
  writing-mode: vertical-rl;
  
}
.rotate-characters-back-to-horizontal{ 
  -webkit-text-orientation: upright;  /* for Webkit */
  text-orientation: upright; 
}

<div class="vertical-sentence">
  <p><span class="rotate-characters-back-to-horizontal" lang="en">Whatever</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="fr">Latin</span></p>
  <p><span class="rotate-characters-back-to-horizontal" lang="hi">वर्डप्रेस </span></p>
</div>

Beachten Sie, dass das Hindi in meinem Beispiel einen Akzent hat, der als einzelnes Zeichen gerendert wird. Das ist das einzige Problem, mit dem ich bei dieser Lösung konfrontiert war.

Von developer.mozilla.org

Die CSS-Eigenschaft für die Textausrichtung legt die Ausrichtung der Textzeichen in einer Zeile fest. Es wirkt sich nur auf Text im vertikalen Modus aus (wenn der Schreibmodus nicht horizontal-tb ist). Es ist nützlich, um die Anzeige von Sprachen zu steuern, die vertikales Skript verwenden, und um vertikale Tabellenüberschriften zu erstellen.

writing-mode: vertical-rl;
text-orientation: mixed;

Sie können hier auch die gesamte Syntax überprüfen

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: unset;

Sie können Zeilenumbruch: Umbruchwort verwenden, um die Verwendung von vertikalem Text nach dem folgenden Snippete zu erhalten

HTML:

<div class='verticalText mydiv'>Here is your text</div>

CSS:

.verticalText {
word-wrap: break-word;
  font-size: 18px;
}
.mydiv {
  height: 300px;
  width: 10px;
}

<style>
    #text_orientation{
        writing-mode:tb-rl;
        transform: rotate(90deg);
        white-space:nowrap;
        display:block;
        bottom:0;
        width:20px;
        height:20px;
    }
</style>
</head>
<body>

<p id="text_orientation">Welcome</p>
</body>

h1{word-break:break-all;display:block;width:40px;} 

HALLO

HINWEIS: Browser unterstützt - IE-Browser (8,9,10,11) - Firefox-Browser (38,39,40,41,42,43,44) - Chrome-Browser (44,45,46,47,48) - Safari Browser (8,9) - Opera-Browser (nicht unterstützt) - Android-Browser (44)

Versuchen Sie es mit einer SVG-Datei. Sie scheint eine bessere Browserkompatibilität zu haben und Ihre reaktionsschnellen Designs nicht zu beschädigen.

Ich habe die CSS-Transformation ausprobiert und hatte große Probleme mit dem Transformationsursprung. und endete mit einer SVG-Datei. Es dauerte ungefähr 10 Minuten und ich konnte es auch ein bisschen mit CSS kontrollieren.

Sie können Inkscape verwenden, um die SVG zu erstellen, wenn Sie nicht über Adobe Illustrator verfügen.

Das funktioniert auch:

transform: rotate(90deg);

Sie können es so versuchen

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

Dies ist eine etwas hackige, aber browserübergreifende Lösung, die kein CSS erfordert

<div>
  <div>h</div>
  <div>e</div>
  <div>l</div>
  <div>l</div>
  <div>o</div>
<div>