html - 竖排两个字的文字，如何换行？

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

添加 word-wrap: break-word; 将给出解决方案 Check Snippet

.side-book {
  position: fixed;
  left: 0;
  z-index: 9999;
  width: 40px;
  height: 80vh;
  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;
  text-transform: uppercase;
  width: 1px;
  word-wrap: break-word;
  font-family: monospace;
}

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