Vertikale Textrichtung

106

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.

Mond
quelle
Hallo, können Sie Ihre akzeptierte Antwort überprüfen, um sie an eine nicht veraltete Syntax anzupassen und die Qualität zu verbessern? Ihre Frage wird als Duplikat gesehen,
G-Cyrillus

Antworten:

107

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

p { writing-mode: tb-rl; }
Schwan
quelle
2
Ich konnte dies finden: generatecontent.org/post/45384206019/writing-modes . Obwohl es sich so hackig anfühlt.
Crystal Miller
6
@CrystalMiller und BTW, w3schools können ein guter Helfer sein, aber es ist nicht die Quelle / Originaldokumentation (so dass einige Dinge übersehen werden können), der "Beamte" ist w3.org oder der nächstgelegene, besser lesbare ist Mozillas Entwicklernetzwerk - "MDN" - developer.mozilla.org
jave.web
Es funktioniert in Chrome, Mozilla und IE Edge, aber nicht in Safari für Windows.
Kushalvm
8
tb-rlist veraltet, bitte verwenden Sie vertical-rlstattdessen.
Jared Chu
3
Wenn sich der vertikale Text auf der linken Seite des Bildschirms befindet, werden die meisten römischen Texte leider von unten nach oben gelesen. Und dann von oben nach unten, wenn sich der Text auf der rechten Seite des Bildschirms befindet. Wenn einige Werte veraltet sind, erhalten wir die einzige vertikale Linie von oben nach unten für die rechte Seite des Bildschirms. Für die linke Seite müssen wir eine Transformation hinzufügen: drehen (180 Grad);
Kir Kanos
80
-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;
}
Amit
quelle
8
Die Eigenschaft 'bottom' hat keinen Wert ohne die Eigenschaft 'position'.
Crystal Miller
2
Ich musste -ms-transform hinzufügen: drehen (90 Grad); um dies in IE11 zum
Laufen zu
1
nach developer.mozilla.org/en-US/docs/Web/CSS/writing-mode , writing-mode:tb-rl;ist veraltet. Verwenden Sie writing-mode:vertical-rlstattdessen!
steffen
64

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.

Geben Sie hier die Bildbeschreibung ein 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.

Mohd Abdul Mujib
quelle
Kann ich den Text vertikal mittig ausrichten?
Mohammad Saifullah
Ich habe nicht ganz verstanden, was Sie unter Ausrichten der Mitte verstehen, aber vielleicht können Sie das Containerelement einfach .vericaltextauf die Mitte ausrichten ?
Mohd Abdul Mujib
1
Unglaublich. Dies sollte stattdessen grün angekreuzt werden. Hoffentlich wird OP es markieren, da er noch auf SO aktiv ist.
Rahul
: D Alte kalte Antwort
Kapil Yadav
Ich habe auch einige heiße und frische: p
Mohd Abdul Mujib
27

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.

Jbrown
quelle
4
<span> muss wahrscheinlich mit display: block sein; richtig drehen
Mladen Janjetovic
2
Ich habe dies auf ein <div> angewendet, das sich in einem <td> befindet. Es scheint sich in allen Browsern erfolgreich zu drehen. ... ... ABER sobald sich der div dreht (90 Grad), erweitert der td seine Höhe nicht.
dsdsdsdsd
11

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

text-orientation: upright;
writing-mode: vertical-rl;
Iggy
quelle
7

Versuchen Sie es mit:

writing-mode: lr-tb;
Mladen Janjetovic
quelle
5

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.

Abdallah Okasha
quelle
4

#myDiv{
text-align: center;
}

#mySpan{
writing-mode: vertical-lr; 
transform: rotate(180deg);
}
<div id="myDiv"> 

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

</div>

Geben Sie hier die Bildbeschreibung ein

vishal singh
quelle
Hallo, danke, dass Sie versucht haben, diese Frage zu beantworten. Können Sie kurz erklären, wie Ihre Lösung das Problem von OP angeht?
James Wong - Wiedereinsetzung Monica
3

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;
}
Nick
quelle
Transformationsursprung ist das, was ich brauchte!
Xtian
links schweben ist was ich brauchte!
Chris
2

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.

oezi
quelle
2

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 */
}
Sadee
quelle
2

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/

MrJoshFisher
quelle
2

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%;
}
RVA
quelle
2

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>
Neil Bauers
quelle
2

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

writing-mode: vertical-rl;
text-orientation: upright;
Rajitha Alluri
quelle
1
.vertical-text {
    transform: rotate(90deg);
    transform-origin: left top 0;
    float: left;
}
JIYAUL MUSTAPHA
quelle
1
<!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>
Sachin Burnawal
quelle
Sie können die Transformation ändern: drehen (270 Grad); zu transformieren: drehen (90 Grad); je nach anforderung
sachin burnawal
1

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.

Beda Schmid
quelle
1

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;
Yousef Altaf
quelle
0

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;
}
Hari Prasandh
quelle
0

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

Ayyappa
quelle
0
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)

Salehin
quelle
0

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.

b01
quelle
0

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);
Bablu Ahmed
quelle
0

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>

Luke Preston
quelle