CSS 水平显示字母并在单词之间添加空格

【问题标题】：CSS Display letters horizontally and add space between wordsCSS 水平显示字母并在单词之间添加空格
【发布时间】：2016-05-08 11:05:08
【问题描述】：

我想让两个单词的字母从上到下垂直显示，并在最后一个单词上添加一个可控的空间（一种填充顶部）。（见下图）

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

有人可以帮助我吗？

谢谢！

【问题讨论】：

使用您的原始 css，尝试将字体大小和行高更改为百分比。行高为 100%。然后将宽度更改为使用 1em。这适用于 IE11。不确定它在 chrome、firefox 或 opera 上的效果如何。

标签： html css frontend

【解决方案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;
}

&lt;p&gt;Stalk Me&lt;/p&gt;

【讨论】：

为什么不提浏览器支持表？
@Pangloss 不知道为什么，但caniuse.com/#search=text-orientation 上什么都没有
@Pangloss，在某种程度上，他做到了。他添加了指向 developer.mozilla.org 的超链接。以下是 caniuse 提供的支持表：caniuse.com/#feat=css-writing-mode
@NenadVracar 这很奇怪。此处的 Chrome 上的输出似乎有问题。
刚刚在 Opera 34 上测试过它并没有工作，但后来我添加了前缀，它工作了 jsfiddle.net/wgewb5nr/5。