How to Add a Vertical Text with CSS Cross-Browser

If you have faced the problem of creating a vertical text, you can use the transform property, which allows you to rotate, scale, move, or skew elements.

Using the transform property, we can rotate the element 90 degrees counterclockwise.

Let’s start with creating HTML.

Create HTML

Place a <div> with a <span class="attribute">class</span> name "rotate" inside the <body> element.
Write content inside the <div> element.

How to Create a Vertical Text with CSS Cross-Browser

<div class="rotate">W3Docs</div>

Add CSS

Set the transform property to "rotate" to rotate the block of text 90 degrees counterclockwise.
Style the content using the font-size and font-weight properties.

How to Create a Vertical Text with CSS Cross-Browser

.rotate {
  font-size: 40px;
  font-weight: bold;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

Now we can see the result of our code.

Example of adding a vertical text with CSS cross-browser:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .rotate {
        font-size: 40px;
        font-weight: bold;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
      }
    </style>
  </head>
  <body>
    <div class="rotate">W3Docs</div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-10 mt-5 mb-20"> <div class="rotate">W3Docs</div> </div>