垂直文字有两个字,怎么换行？

Question

我知道这个问题非常措辞,但我真的不知道怎么说出来!

我有以下HTML:

<a href="" class="side-book"><p>Book Now</p></a>

使用以下CSS:

.side-book{
        position:fixed;
        left:0;
        z-index:9999;
        width:40px;
        height:20vh;
        top:40vh;
        bottom:40vh;
        background-color: #be0500;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        display:flex;
    }
.side-book>p{
        color:white;
        float:left;
        margin: auto;
        transform: rotate(90deg);
        text-transform: uppercase;
    }

其结果如下:

我怎样才能使"书"和"现在"这两个词相互叠加？我已经尝试将它们放在单独的<p>标签中,但无济于事.

另外:如果有人对标记的其余部分有任何更好的建议,使其更清洁/更好,请把它们扔给我!

编辑:

有点像这样(字母可以任意方式定向,我只是无法显示它们,因为它们在使用此文本编辑器的示例中):

___
   |
   |
 B |
 O |
 O |
 K |
   |
 N |
 O |
 W |
   |
___|

Answer 1

可以使用文本方向和写作模式来完成

text-orientation: upright;
writing-mode: vertical-lr;

text-orientation: upright;
writing-mode: vertical-lr;

.side-book {
  position: fixed;
  left: 0;
  z-index: 9999;
  width: 40px;
  height: 20vh;
  top: 40vh;
  bottom: 40vh;
  background-color: #be0500;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  display: flex;
}

.side-book>p {
  padding-top: 20px;
  height: 200px;
  color: blue;
  float: left;
  margin: auto;
  text-orientation: upright;
  writing-mode: vertical-lr;
}