How to implement vertical text alignment with CSS (Summary)

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.

<<:  How to install redis in Docke

>>:  9 Practical Tips for Creating Web Content Pages

Recommend

Two ways to start Linux boot service

Table of contents rc.local method chkconfig metho...

Detailed introduction to MySQL database index

Table of contents Mind Map Simple understanding E...

How to implement load balancing in MySQL

Preface MySQL is a high-speed, high-performance, ...

How to play local media (video and audio) files using HTML and JavaScript

First of all, for security reasons, JavaScript ca...

Comparative Analysis of UI Applications of Image Social Networking Sites (Figure)

In our life, work and study, social networks have ...

Using HTML to implement a voting website cheating scheme that restricts IP

This is a cheating scheme for voting websites wit...

MySQL 5.7.18 installation and configuration tutorial under Windows

This article shares the installation and configur...

Chrome 4.0 supports GreaseMonkey scripts

GreaseMokey (Chinese people call it Grease Monkey...

How to install setup.py program in linux

First execute the command: [root@mini61 setuptool...

Explanation on whether to choose paging or loading in interactive design

The author of this article @子木yoyo posted it on hi...

MySQL 5.7 zip archive version installation tutorial

This article shares the installation tutorial of ...

7 Best VSCode Extensions for Vue Developers

Adding the right VS Code extension to Visual Stud...

Echart Bar double column chart style most complete detailed explanation

Table of contents Preface Installation and Config...