HTML/CSS : How to write a text vertically, keeping the characters horizontally

Viewed 13648

I'm wondering if we could write a vertically text, but without use a rotation of any hacks that change the characters direction.

So, instead of "START", I want a text in may div displayed like this :
S
T
A
R
T

I could use "break-word: word-break" and set the width of my element to 0, but the text would'nt be centered. Characters will just be aligned to the left

Not a duplicate of : Vertical Text Direction
I don't want to rotate the text, I want to preserve character's direction

Here is a code example of what I can get :

.vertical-text {
    font-size: 25px;
    word-break: break-word;
    width: 0;
    display: flex;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
 }
 
 body, html {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%
 }
<div class="vertical-text">START IT<div>

3 Answers
Related