Próbowałem, aby tekst był przesuwany w kierunku pionowym, tak jak możemy to zrobić w tabelach ms-word, ale do tej pory byłem w stanie zrobić tylko TO ... z czego nie jestem zadowolony, ponieważ jest to obrócone pudełko ... Czy nie Czy istnieje sposób na uzyskanie rzeczywistego tekstu kierunku pionowego?

W wersji demonstracyjnej ustawiłem obrót tylko na 305 stopni, co nie powoduje pionizacji tekstu. 270degwill, ale zrobiłem demo tylko po to, aby pokazać rotację.

Alternatywne podejście: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

-webkit-transform: rotate(90deg);

Pozostałe odpowiedzi są poprawne, ale doprowadziły do ​​pewnych problemów z wyrównaniem. Próbując różnych rzeczy, ten kod CSS działał idealnie dla mnie.

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

Szukałem rzeczywistego tekstu pionowego, a nie obróconego tekstu w HTML, jak pokazano poniżej. Mogłem więc to osiągnąć stosując następującą metodę.

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! Próbny.

Aktualizacja: - Jeśli chcesz, aby białe znaki były wyświetlane, dodaj następującą właściwość do swojego css.

white-space: pre;

Tak więc klasa css powinna być

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

Aktualizacja 2 (28 czerwca 2015 r.)

Ponieważ white-space: pre;wydaje się, że nie działa (do tego konkretnego zastosowania) w przeglądarce Firefox (na razie), po prostu zmień tę linię na

white-space: pre-wrap;

Tak więc klasa css powinna być

.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.*/
}

Kompatybilny z JsFiddle Demo FF.

Aby obrócić tekst o 90 stopni:

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

Wygląda również na to, że znacznika span nie można obrócić bez ustawienia wyświetlania: blok.

W przypadku tekstu pionowego ze znakami znajdującymi się jeden pod drugim w przeglądarce Firefox:

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

Spróbuj użyć:

writing-mode: lr-tb;

Aby wyświetlić tekst w pionie (od dołu do góry), możemy po prostu użyć:

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>

Zauważ, że możemy to dodać, aby zapewnić zgodność z przeglądarkami:

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

możemy również przeczytać więcej o writing-modewłaściwościach tutaj w dokumentach Mozilli.

Jestem w tym nowy, bardzo mi to pomogło. Po prostu zmień szerokość, wysokość, górę i lewo, aby dopasować:

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

Możesz także przejść tutaj i zobaczyć inny sposób, aby to zrobić. Autor robi to tak:

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

rotacja, tak jak ty, jest drogą do zrobienia - ale pamiętaj, że nie wszystkie przeglądarki to obsługują. jeśli nie chcesz mieć rozwiązania obsługującego wiele przeglądarek, musisz wygenerować do tego obrazy.

Może używać właściwości Transform CSS3

.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 */
}

Dodaj klasę

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

}

Używam tego prawie codziennie i nie miałem z tym żadnych problemów.

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

Udało mi się mieć działające rozwiązanie z tym:

(Mam tytuł w obrębie elementu div klasy middleItem)

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

Oto przykład kodu SVG, którego użyłem do umieszczenia trzech wierszy tekstu pionowego w nagłówku kolumny tabeli. Możliwe są inne kąty przy odrobinie poprawek. Uważam, że obecnie większość przeglądarek obsługuje format 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>

Możesz osiągnąć to samo za pomocą poniższych właściwości CSS:

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

Najlepszym rozwiązaniem byłoby użycie writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Określa, czy wiersze tekstu są ułożone poziomo, czy pionowo oraz kierunek, w którym blokuje postęp.

Ma dobrą obsługę przeglądarki, ale nie będzie działać na IE8 (jeśli zależy ci na IE) 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>

Jeśli chcesz wyrównanie, takie jak

S
T
A
R
T

Następnie postępuj zgodnie z https://www.w3.org/International/articles/vertical-text/#upright-latin

Przykład:

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>

Zauważ, że w moim przykładzie hindi ma akcent, który zostanie wyrenderowany jako pojedynczy znak. To jedyny problem, z jakim miałem do czynienia w przypadku tego rozwiązania.

Z developer.mozilla.org

Właściwość CSS orientacji tekstu określa orientację znaków tekstu w linii. Wpływa tylko na tekst w trybie pionowym (gdy tryb-pisania nie jest ustawiony na poziomy-tb). Jest to przydatne do kontrolowania wyświetlania języków używających skryptu pionowego, a także do tworzenia pionowych nagłówków tabel.

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

Możesz również przejrzeć całą składnię tutaj

/* 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;

Możesz użyć zawijania wyrazów: słowo przerwania, aby uzyskać tekst pionowy, użyj następującego skrawka

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

DZIEŃ DOBRY

UWAGA: Obsługiwana przeglądarka - przeglądarka IE (8,9,10,11) - przeglądarka Firefox (38,39,40,41,42,43,44) - przeglądarka Chrome (44,45,46,47,48) - Safari przeglądarka (8,9) - przeglądarka Opera (nieobsługiwana) - przeglądarka Android (44)

Spróbuj użyć pliku SVG, wydaje się, że ma lepszą zgodność z przeglądarkami i nie zepsuje Twoich responsywnych projektów.

Próbowałem transformacji CSS i miałem dużo problemów z pochodzeniem transformacji; i skończyło się na pliku SVG. Zajęło mi to około 10 minut i mogłem to trochę kontrolować za pomocą CSS.

Możesz użyć Inkscape do stworzenia SVG, jeśli nie masz programu Adobe Illustrator.

Działa to również:

transform: rotate(90deg);

Możesz spróbować w ten sposób

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

Jest to trochę hacky, ale rozwiązanie obsługujące wiele przeglądarek, które nie wymaga CSS

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