CSS Отображение букв по горизонтали и добавление пробелов между словами

Question

Я хочу, чтобы буквы из двух слов отображались вертикально, сверху вниз и, чтобы добавить контролируемое пространство (вид верхнего слоя) на последнем слове. (Смотрите рисунок ниже)

(В Photoshop, вы получите вышеупомянутый эффект, нажав Shift + Enter после буквы.)

---

я получил что-то близкое, но кто-то может знать лучшее решение.
Мое решение:

<p>Stalk &nbsp; Me</p> 

<!-- &nbsp; is a HTML space entity --> 

p { 
    font-size  : 20px; 
    width   : 28px;  /* depends on font-size */ 
    line-height : 20px;  /* depends on font-size */ 
    word-wrap  : break-word; 
    text-transform : uppercase; 
    text-align  : center; 
} 

Живой пример: https://jsbin.com/sacimo/edit?html,css,output

---

Может кто-нибудь мне помочь?

Спасибо!

Answer 1

Вы можете сделать это с помощью text-orientation: upright и writing-mode: vertical-rl. Добавить -webkit- и -ms-Browser vendor prefixes если необходимо подобный Demo.

p { 
 
    writing-mode: vertical-rl; 
 
    text-orientation: upright; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
}

<p>Stalk Me</p>