带有两个单词的垂直文本，如何换行？

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;将提供解决方案检查代码段

.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>

Answer 2

可以使用text-orientation和writing-mode

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

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