How to implement vertical text alignment with CSS (Summary)

The default arrangement of text in HTML is horizontal, but in some special cases, the text needs to be arranged vertically.

Single line text vertical arrangement

.onecn{
     width: 20px;  
    margin: 0 auto;  
    line-height: 24px;  
} 

.oneen{
    width: 15px;
    margin: 0 auto;
    line-height: 24px;
    font-size: 20px;
    word-wrap: break-word;/*You need to add this sentence when writing in English to automatically wrap the line*/
    word-break:break-all;
}

Note: To arrange text in a single line vertically, you only need to set the width to just accommodate one font.

Multiple lines of text arranged vertically

.two{
      margin: 0 auto;
      height: 140px;
      writing-mode: vertical-lr;/*From left to right and from right to left is writing-mode: vertical-rl;*/ 
    writing-mode: tb-lr;/*IE browser's left to right and right to left is writing-mode: tb-rl;*/
  }

Note: Height is very important. If you need to control the spacing between text and lines, you can add the attributes letter-spacing and line-height.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.