CODEWITHSUNDEEP
htmlcss
Liam G
Liam G

Reputation: 597

Vertical text with two words, how to line break?

Terribly worded question I know, but I don't really know how to word it!

I have the following HTML:

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

With the following 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;
    }

Which has the following result:

Result

How can I make it so that the words 'Book' & 'Now' sit on top of each other? I have tried putting them in separate <p> tags, but to no avail.

Also: If anyone has any better suggestions for the rest of the markup to make it cleaner/better, throw them at me!

EDIT:

A bit like this (The letters can be oriented any way, I just can't display them as they are in the example using this text editor):

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

Upvotes: 8

Views: 2024

Answers (2)

August
August

Reputation: 2113

It could be done using text-orientation and 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>

Upvotes: 3

sanoj lawrence
sanoj lawrence

Reputation: 993

Adding word-wrap: break-word; will give solution 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>

Upvotes: 3

Related Questions