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>