如何使用css制作垂直文本？

Question

我期待一些像下面的图片。但我想在垂直边框上添加文字。

在该边框上我想添加文字 ex：学生详细信息

我已经看到了link。

我也试过以下代码来旋转：-90度

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

工作正常。但我想将这5个点与垂直文本合并。

如何实现它？我是css的新手

Answer 1

我想你想做那样的事情＆gt; https://codepen.io/dakata911/pen/NweMpy

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

Answer 2

不完全是纯CSS解决方案，但通过添加换行符然后使用pre间距来获取垂直文本非常容易。第二个例子使用了一些JS来避免将换行符硬编码到标记中。

＆＃13;

＆＃13;

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

＆＃13;

<h2>V
e
r
t
i
c
a
l

T
e
x
t
</h2>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

const h2 = document.querySelector('h2')

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

＆＃13;

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

＆＃13;

<h2>Vertical Text</h2>

＆＃13;

＆＃13;

＆＃13;