Saya telah mencoba teks untuk pergi ke arah vertikal seperti yang dapat kita lakukan dalam tabel ms-word tetapi sejauh ini saya hanya dapat melakukan INI ... yang saya tidak senang karena ini adalah kotak yang diputar ... Isn ' t ada cara untuk memiliki teks arah vertikal yang sebenarnya?

Saya hanya mengatur rotasi ke 305 derajat di demo yang tidak membuat teks vertikal. 270degakan tetapi saya hanya membuat demo untuk menunjukkan rotasi.

Pendekatan alternatif: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

-webkit-transform: rotate(90deg);

Jawaban lainnya benar tetapi menyebabkan beberapa masalah penyelarasan. Saat mencoba berbagai hal, kode potongan CSS ini bekerja dengan sempurna untuk saya.

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

Saya sedang mencari teks vertikal yang sebenarnya dan bukan teks yang diputar dalam HTML seperti yang ditunjukkan di bawah ini. Jadi saya bisa mencapainya dengan menggunakan metode berikut.

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.

Pembaruan: - Jika Anda membutuhkan spasi putih untuk ditampilkan, tambahkan properti berikut ke css Anda.

white-space: pre;

Jadi, kelas css adalah

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

Pembaruan 2 (28-JUN-2015)

Karena white-space: pre;tampaknya tidak berfungsi (untuk penggunaan khusus ini) di Firefox (seperti yang sekarang), ubah saja baris itu menjadi

white-space: pre-wrap;

Jadi, kelas css adalah

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

Kompatibel dengan JsFiddle Demo FF.

Untuk memutar teks 90 derajat:

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

Selain itu, tampaknya tag span tidak dapat diputar tanpa disetel ke display: block.

Untuk teks vertikal dengan karakter satu di bawah lainnya dalam penggunaan firefox:

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

Coba gunakan:

writing-mode: lr-tb;

Untuk menampilkan teks secara vertikal (Bawah-atas) kita cukup menggunakan:

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>

Perhatikan bahwa kami dapat menambahkan ini untuk memastikan Kompatibilitas Browser:

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

kita juga dapat membaca lebih lanjut tentang writing-modeproperti di sini di dokumen Mozilla.

Saya baru dalam hal ini, itu sangat membantu saya. Ubah saja lebar, tinggi, atas dan kiri agar pas:

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

Anda juga dapat membuka di sini dan melihat cara lain untuk melakukannya. Penulis melakukannya seperti ini:

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

rotasi, seperti yang Anda lakukan, adalah cara yang harus dilakukan - tetapi perhatikan bahwa tidak semua browser mendukungnya. jika Anda tidak ingin mendapatkan solusi lintas-browser, Anda harus membuat gambar untuk itu.

Dapat menggunakan properti Transformasi 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 */
}

Tambahkan kelas

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

}

Saya menggunakan ini hampir setiap hari dan tidak memiliki masalah apa pun dengannya.

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

Saya telah berhasil memiliki solusi yang berfungsi dengan ini:

(Saya memiliki judul dalam div kelas middleItem)

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

Berikut adalah contoh beberapa kode SVG yang saya gunakan untuk memasukkan tiga baris teks vertikal ke dalam judul kolom tabel. Sudut lain dimungkinkan dengan sedikit penyesuaian. Saya yakin sebagian besar browser mendukung SVG saat ini.

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

Anda dapat mencapai hal yang sama dengan properti CSS di bawah ini:

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

Solusi terbaik adalah menggunakan writing-mode writing-mode: vertical-rl; https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Ini menentukan apakah baris teks ditata secara horizontal atau vertikal dan arah kemajuan yang menghalangi.

Ini memiliki dukungan browser yang baik, tetapi tidak akan berfungsi di IE8 (jika Anda peduli dengan 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>

Jika Anda menginginkan perataan seperti

S
T
A
R
T

Kemudian ikuti https://www.w3.org/International/articles/vertical-text/#upright-latin

Contoh:

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>

Perhatikan bahwa bahasa Hindi memiliki aksen dalam contoh saya dan itu akan diberikan sebagai karakter tunggal. Itulah satu-satunya masalah yang saya hadapi dengan solusi ini.

Dari developer.mozilla.org

Properti CSS orientasi teks menyetel orientasi karakter teks dalam satu baris. Ini hanya mempengaruhi teks dalam mode vertikal (saat mode penulisan tidak horizontal-tb). Berguna untuk mengontrol tampilan bahasa yang menggunakan skrip vertikal, dan juga untuk membuat header tabel vertikal.

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

Anda juga dapat meninjau semua Sintaks di sini

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

Anda dapat menggunakan word-wrap: break-word untuk mendapatkan teks vertikal menggunakan cuplikan berikut

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

HALO

CATATAN: Browser yang Didukung - Browser IE (8,9,10,11) - Browser Firefox (38,39,40,41,42,43,44) - Browser Chrome (44,45,46,47,48) - Safari browser (8,9) - Browser Opera (Tidak Didukung) - Browser Android (44)

Coba gunakan file SVG, tampaknya memiliki kompatibilitas browser yang lebih baik, dan tidak akan merusak desain responsif Anda.

Saya mencoba transformasi CSS, dan mengalami banyak masalah dengan transform-origin; dan akhirnya menggunakan file SVG. Butuh waktu 10 menit, dan saya bisa mengontrolnya sedikit dengan CSS juga.

Anda dapat menggunakan Inkscape untuk membuat SVG jika Anda tidak memiliki Adobe Illustrator.

Ini bekerja juga:

transform: rotate(90deg);

Anda bisa mencoba seperti ini

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

Ini sedikit hacky tapi solusi lintas browser yang tidak membutuhkan CSS

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