How to achieve horizontal arrangement of text in css

How to realize horizontal text arrangement in css: first create an HTML sample file; then create a p tag; and finally use the "writing-mode: horizontal-tb;" attribute to realize horizontal text arrangement.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

How to realize horizontal text arrangement in css?

css to achieve horizontal/vertical text arrangement

##writing-mode: Writing mode

Attribute valueEffecthorizontal-tbHorizontal arrangement##vertical-rlvertical-lrFor example:

Vertical arrangement, from right to left
Arrange vertically, from left to right

html：

<p class="textBox">
    <h1>horizontal-tb：横向排列</h1>
    <h1>vertical-rl：纵向排列，从右到左</h1>
    <h1>vertical-lr：纵向排列，从左到右</h1></p>

css：

    <style>
        .textBox h1{
            width: 200px;
            height: 200px;
            margin: 10px 10px;
            padding: 10px;
            float: left;
        }
        .textBox h1:nth-of-type(1){
            writing-mode: horizontal-tb;
            background-color: #42b983;
        }
        .textBox h1:nth-of-type(2){
            writing-mode: vertical-rl;
            background-color: #42a8b9;
        }
        .textBox h1:nth-of-type(3){
            writing-mode: vertical-lr;
            background-color: #81b9aa;
        }
    </style>

Achievement effect:
Recommended study: "

css video tutorial

"

The above is the detailed content of How to achieve horizontal arrangement of text in css. For more information, please follow other related articles on the PHP Chinese website!