CSS如何实现字母水平排列并添加单词间距

Question

我想让两个单词的字母垂直显示，从上到下，并在最后一个单词上添加可控制的空间（一种类似于padding-top的空间）。 （请参见下面的图像）

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

Live example: https://jsbin.com/sacimo/edit?html,css,output

---

有人可以帮我吗？

谢谢！

- Marian07

---

使用您的原始CSS，尝试将字体大小和行高更改为百分比。将行高设置为100％。然后将宽度更改为使用1em。这在IE11上有效。不确定在Chrome，Firefox或Opera上如何运行。 - nocturns2

Answer 1

你可以使用 text-orientation: upright 和 writing-mode: vertical-rl 来实现这个目标。如果需要，可以像这样添加 -webkit- 和 -ms- 浏览器厂商前缀，请参考 演示。

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

<p>Stalk Me</p>

- Nenad Vracar

---

为什么你不提到浏览器支持表格呢？ - Stickers

刚在 Opera 34 上测试了一下，发现不起作用，但是添加了前缀之后就可以了。https://jsfiddle.net/wgewb5nr/5/ - Nenad Vracar

@NenadVracar 是的，最新的Chrome 48已经取消了前缀。但是它仍然缺少单词之间的空格。 - Stickers

@Pangloss 我刚在 Chrome v48.0.2564.97 上测试了一下，它可以工作。 - Nenad Vracar

@NenadVracar 不确定为什么这里缺少空格。无论如何，我同意这可能是唯一的解决方案，而不需要编辑标记。 - Stickers