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。

＆＃13;

＆＃13;

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

＆＃13;

<p>Stalk Me</p>

＆＃13;

＆＃13;

＆＃13;