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

Layui implements the login interface verification code

This article example shares the specific code of ...

Web design experience: Make the navigation system thin

<br />When discussing with my friends, I men...

Summary of the characteristics of SQL mode in MySQL

Preface The SQL mode affects the SQL syntax that ...

Detailed installation tutorial of Mysql5.7.19 under Centos7

1. Download Download mysql-5.7.19-linux-glibc2.12...

CSS3 timeline animation

Achieve results html <h2>CSS3 Timeline</...

Vue + OpenLayers Quick Start Tutorial

Openlayers is a modular, high-performance and fea...

How to insert weather forecast into your website

We hope to insert the weather forecast into the w...

HTML table tag tutorial (34): row span attribute ROWSPAN

In a complex table structure, some cells span mul...

js canvas realizes random particle effects

This article example shares the specific code of ...

Solve the problem of docker pull being reset

This article introduces how to solve the problem ...

How to install MySQL 8.0 and log in to MySQL on MacOS

Follow the official tutorial, download the instal...