CSS Display letters horizontally and add a space between words

Question

I want the letters of two words to be displayed vertically, from top to bottom, and to add controlled space (top layer view) on the last word. (See image below)

(In Photoshop, you get the above effect by pressing Shift + Enter after the letter.)

---

I got something close, but someone might know a better solution.
My decision:

<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; } 

Real-time example: https://jsbin.com/sacimo/edit?html,css,output

---

Can someone help me?

Thanks!

Answer 1

You can do this with text-orientation: upright and writing-mode: vertical-rl . Add -webkit- and -ms- Browser vendor prefixes , if necessary, Demo .

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

 <p>Stalk Me</p>