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

Question

我想让两个单词的字母从上到下垂直显示，并在最后一个单词上添加一个可控的space（一种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

有人可以帮助我吗？

谢谢！

Answer 1

您可以使用 text-orientation: upright and writing-mode: vertical-rl. Add -webkit- and -ms- Browser vendor prefixes if needed like this Demo 来做到这一点。

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

<p>Stalk Me</p>

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

CSS Display letters horizontally and add space between words

html

css

frontend