Metni ms kelimeli tablolarda olduğu gibi dikey yönde gitmeye çalışıyordum ama şimdiye kadar sadece BUNU yapabildim ... ki bu bir kutu döndürüldüğü için mutlu değilim ... Gerçek dikey yön metnine sahip olmanın bir yolu var mı?

Metni dikey yapmayan demoda sadece dönüşü 305 dereceye ayarlıyorum. 270degolacak ama demoyu sadece dönüşü göstermek için yaptım.

Alternatif yaklaşım: http://www.thecssninja.com/css/real-text-rotation-with-css

p { writing-mode: tb-rl; }

-webkit-transform: rotate(90deg);

Diğer cevaplar doğrudur ancak bazı uyum sorunlarına yol açmıştır. Farklı şeyler denerken bu CSS parça kodu benim için mükemmel çalıştı.

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

Aşağıda gösterildiği gibi HTML'de döndürülmüş metni değil, gerçek bir dikey metin arıyordum. Yani aşağıdaki yöntemi kullanarak bunu başarabildim.

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.

Güncelleme: - Beyaz boşlukların görüntülenmesine ihtiyacınız varsa , aşağıdaki özelliği css'nize ekleyin.

white-space: pre;

Yani css sınıfı

.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! Whitespace ile Demo

Güncelleme 2 (28-HAZİRAN-2015)

Yana white-space: pre;doesnt (şimdi itibarıyla) Firefox üzerinde (bu özel kullanımı için) çalışmaları gibi görünüyor, sadece o çizgiyi değiştirmek

white-space: pre-wrap;

Yani css sınıfı

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

Metni 90 derece döndürmek için:

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

Ayrıca, span etiketinin display: block olarak ayarlanmadan döndürülemeyeceği anlaşılıyor.

Firefox'ta üst üste karakter içeren dikey metinler için:

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

Şunları kullanmayı deneyin:

writing-mode: lr-tb;

Metni dikey olarak görüntülemek için (Alt-üst) şunları kullanabiliriz:

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>

Tarayıcı Uyumluluğunu sağlamak için bunu ekleyebileceğimizi unutmayın:

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

Ayrıca writing-modeburada, Mozilla belgelerinde mülkiyet hakkında daha fazla bilgi edinebiliriz .

Bu işte yeniyim, bana çok yardımcı oldu. Sığdırmak için genişliği, yüksekliği, üst ve solu değiştirin:

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

Ayrıca buraya gidebilir ve bunu yapmanın başka bir yolunu görebilirsiniz. Yazar bunu şöyle yapıyor:

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

Rotasyon, sizin yaptığınız gibi, gitmenin yoludur - ancak tüm tarayıcıların bunu desteklemediğini unutmayın. Tarayıcılar arası bir çözüm elde etmek istemiyorsanız, bunun için resimler oluşturmanız gerekir.

CSS3 Transform özelliğini kullanabilir

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

Sınıfı ekleyin

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

}

Bunu hemen hemen her gün kullanıyorum ve herhangi bir sorun yaşamadım.

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

Bununla çalışan bir çözüme sahip olmayı başardım:

(Bir middleItem sınıfı div içinde bir başlığım var)

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

Bir tablo sütun başlığına üç satırlık dikey metin almak için kullandığım bazı SVG kodlarının bir örneğini burada bulabilirsiniz. Biraz ince ayar yaparak başka açılar da mümkündür. Bugünlerde çoğu tarayıcının SVG'yi desteklediğine inanıyorum.

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

Aynısını aşağıdaki CSS özellikleriyle de elde edebilirsiniz:

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

En iyi çözüm https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode kullanmaktır.writing-mode writing-mode: vertical-rl;

Metin satırlarının yatay mı yoksa dikey mi düzenleneceğini ve blokların ilerleme yönünü tanımlar.

İyi bir tarayıcı desteğine sahiptir, ancak IE8 üzerinde çalışmayacaktır (IE'yi önemsiyorsanız) 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>

Gibi bir hizalama istiyorsanız

S
T
A
R
T

Ardından https://www.w3.org/International/articles/vertical-text/#upright-latin'i takip edin

Misal:

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>

Örneğimde Hintçe'nin bir aksanına sahip olduğuna ve bunun tek bir karakter olarak gösterileceğine dikkat edin. Bu çözümle karşılaştığım tek sorun bu.

Gönderen developer.mozilla.org

Metin yönü CSS özelliği, bir satırdaki metin karakterlerinin yönünü ayarlar. Yalnızca dikey moddaki metni etkiler (yazma modu yatay-tb olmadığında). Dikey yazı kullanan dillerin görünümünü kontrol etmek ve ayrıca dikey tablo başlıkları yapmak için kullanışlıdır.

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

Tüm Sözdizimini burada da inceleyebilirsiniz

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

Dikey metin elde etmek için word-wrap: break-word'ü kullanabilirsiniz.

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

MERHABA

NOT: Desteklenen Tarayıcı - IE tarayıcı (8,9,10,11) - Firefox tarayıcısı (38,39,40,41,42,43,44) - Chrome tarayıcı (44,45,46,47,48) - Safari tarayıcı (8,9) - Opera tarayıcı (Desteklenmiyor) - Android tarayıcı (44)

Bir SVG dosyası kullanmayı deneyin, daha iyi bir tarayıcı uyumluluğuna sahip gibi görünüyor ve duyarlı tasarımlarınızı bozmaz.

CSS dönüşümünü denedim ve dönüşüm orijininde çok sorun yaşadım; ve bir SVG dosyasıyla sonuçlandı. 10 dakika kadar sürdü ve bunu CSS ile de biraz kontrol edebildim.

Adobe Illustrator'ınız yoksa, SVG oluşturmak için Inkscape'i kullanabilirsiniz.

Bu da işe yarar:

transform: rotate(90deg);

Böyle deneyebilirsin

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

Bu biraz karmaşık ama CSS gerektirmeyen çapraz tarayıcı çözümü

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