How to make vertical text using css?

Question

I am expecting some thing like the below pic. But I want to add text on that vertical border.

on that border I want to add text ex: Student detail

I already saw this link.

And also I tried this below code to rotate: -90 degree

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

It is working fine. But I want to merge those 5 points with that vertical text.

How to achieve it?. I am new to css

"I want to merge those 5 points with that vertical text" What does that mean, specifically? — Daniel Beck, Nov 30 '17 at 21:17
@DanielBeck I am trying to make as same as picture with text on that border. Merge means nothing, those 5 span tag should be float left with that vertical text — Liam neesan, Nov 30 '17 at 21:20
It seems like you've got a good idea of how to do it. What's going wrong? — showdev, Nov 30 '17 at 21:21
You may want to include a code sample of what you have so far; from your description it sounds as though you already have all the ingredients for the solution, so it's difficult for us to tell where you need help. — Daniel Beck, Nov 30 '17 at 21:23
@showdev I am seriously don't know how to make this design. I just know about how to change the text to vertical. — Liam neesan, Nov 30 '17 at 21:26
would this help better ? https://stackoverflow.com/questions/6997631/how-to-display-vertical-text-in-table-headers-with-auto-height-without-text-ov/22177247#22177247 Can you also post your html and CSS into a snippet, so we can really see where you failed and we can eventually give you some hints on how to (of course structure and rules already played matters for the technic to apply). there is `writing-mode` that can also do the job — G-Cyrillus, Nov 30 '17 at 21:27
share your html/css if you want some answers, let's try keeping guessing : maybe similar to that one : https://stackoverflow.com/questions/46993971/css-90-rotated-div-cant-center-text-width-limits-rotation-using-flexbox (there is a list in the structure:) — G-Cyrillus, Nov 30 '17 at 21:35
@G-Cyr like this [link](http://jsfiddle.net/qjzwG/320/). I want second and third th in horizontal except 1st. — Liam neesan, Nov 30 '17 at 21:40

score 1 · Answer 1 · answered Dec 01 '17 at 11:33

1

I think you want to do something like that > https://codepen.io/dakata911/pen/NweMpy

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

answered Dec 01 '17 at 11:33

Yordan Ramchev

340
4
14

score 0 · Answer 2 · answered Nov 30 '17 at 21:52

Not exactly a pure CSS solution, but it's pretty easy to get vertical text by adding line breaks, and then using pre spacing. Second example uses a bit of JS to avoid hardcoding the line breaks into the markup.

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>

How to make vertical text using css?

2 Answers2