How to realize vertical arrangement of text using CSS3

In a recent project, I wanted to align text vertically, which is how I used the CSS writing-mode property.

Writing-mode was originally a property supported by IE, and later this new property was added in CSS3, so the syntax in IE and other browsers will be different.

1.0 CSS3 Standard

writing-mode:horizontal-tb; //Default: horizontal direction, from top to bottom writing-mode:vertical-rl; //Vertical direction, from right to left writing-mode:vertical-lr; //Vertical direction, from left to right

demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS text vertical alignment</title>
        <style type="text/css">
            div{
                border: 1px solid lightblue;
                padding: 5px;
            }
            .vertical-text{
                -webkit-writing-mode: vertical-rl;
                writing-mode: vertical-rl;
            }
        </style>
    </head>
    <body>
        <div class="vertical-text">
            1. Text is arranged vertically<br />
            2. Text is arranged vertically</div>
    </body>
</html>

2.0 Internet Explorer

Due to historical reasons, the value of this property in IE is particularly complicated:

For details, please refer to the official documentation:

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode/

3.0 Some Applications

3.1 Vertical Centering

By using this property, we can combine it with text-align:center to achieve vertical centering or use margin: auto.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS3 image vertical center</title>
        <style type="text/css">
            div{
                border: 1px solid lightblue;
                padding: 5px;
                height: 500px;
            }
            .vertical-img{
                -webkit-writing-mode: vertical-rl;
                -ms-writing-mode: bt-rl;
                writing-mode: vertical-rl;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="vertical-img">
             <img src="1.jpg"/>
        </div>
    </body>
</html>

3.2 Text sinking effect

We can set the writing-mode of the text, and then combine it with text-indent to achieve the sinking effect when the text is clicked;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Text sinking effect</title>
        <style type="text/css">
            .btn{
                width: 50px;
                height: 50px;
                line-height: 50px;
                color: white;
                text-align: center;
                font-size: 16px;;
                display: inline-block;
                border-radius: 50%;
                background: gray;
                cursor: pointer;
            }
            .btn:active{
                text-indent: 2px;
            }
            .vertical-text{
                 writing-mode: tb-rl;
                -webkit-writing-mode: vertical-rl;      
                writing-mode: vertical-rl;
                *writing-mode: tb-rl;
            }
        </style>
    </head>
    <body>
        <span>Click to receive red envelope</span>
        <p class="vertical-text btn">Open</p>
    </body>
</html>

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.

<<: Beginners learn some HTML tags (2)

>>: Detailed discussion of several methods for deduplicating JavaScript arrays

Implementation and usage scenarios of JS anti-shake throttling function

How to realize vertical arrangement of text using CSS3

Implementation and usage scenarios of JS anti-shake throttling function

A brief analysis of how to use border and display attributes in CSS

Nginx reverse proxy springboot jar package process analysis

JS realizes the front-end paging effect

CSS horizontal centering and limiting the maximum width

Several ways to hide Html elements

How to build Nginx image server with Docker

MySQL uses custom functions to recursively query parent ID or child ID

Tutorial diagram of installing centos7.3 on vmware virtual machine

Detailed analysis of javascript data proxy and events

Recommend

MySQL Query Cache and Buffer Pool

Javascript tree menu (11 items)

Two ways to make IE6 display PNG-24 format images normally

Vue+ssh framework to realize online chat

How to enable remote access permissions in MYSQL

Docker case analysis: Building a Redis service

How to isolate users in docker containers

Detailed explanation of the process of nginx obtaining the real source IP after passing through multiple layers of proxy

Three ways to implement animation in CSS3

Solve the problem that shutting down Tomcat using shutdown.bat will shut down other Tomcats

Solve the problems encountered during the installation of Mysql 8.0.17 winx64 version

MySQL stored procedures and common function code analysis

Basic knowledge of MySQL database

Perfect solution to MySQL common insufficient memory startup failure

Method of building docker private warehouse based on Harbor