cssを使用して縦書きテキストを作成するにはどうすればよいですか？

Question

私は以下の写真のようなものを期待しています。しかし、私はその垂直境界線にテキストを追加したいと思います。私はテキスト元を追加したいという国境の

：学生詳細

私はすでにこのlinkを見ました。

そしてまた、私は回転して、コードの下に、これを試してみました：-90度

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

は、それが正常に動作しています。しかし、私はそれらの5つの点をその縦書きテキストにマージしたい。

どのように達成するには？私はCSSを初めて使用しています

Answer 1

まったく純粋なCSSソリューションではありませんが、改行を追加してから、preスペーシングを使用して縦書きテキストを取得するのはかなり簡単です。 2番目の例では、JSのビットを使用して、マークアップへの改行をハードコーディングしないようにしています。

h2 { 
 
    white-space: pre; 
 
    text-align: center; 
 
    width: 40px; 
 
    background: grey; 
 
    color: white; 
 
    padding: 10px; 
 
}

<h2>V 
 
e 
 
r 
 
t 
 
i 
 
c 
 
a 
 
l 
 

 
T 
 
e 
 
x 
 
t 
 
</h2>

const h2 = document.querySelector('h2') 
 

 
h2.innerText = h2.innerText 
 
    .split('') 
 
    .join('\n')

h2 { 
 
    white-space: pre; 
 
    text-align: center; 
 
    width: 40px; 
 
    background: grey; 
 
    color: white; 
 
    padding: 10px; 
 
}

<h2>Vertical Text</h2>

Answer 2

私はあなたが私はそれらの5 POをマージしたいこと> https://codepen.io/dakata911/pen/NweMpy

/* Rotate div */ 
    -ms-transform: rotate(270deg); /* IE 9 */ 
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */ 
    transform: rotate(270deg);