Home  >  Article  >  Web Front-end  >  How to achieve horizontal arrangement of text in css

How to achieve horizontal arrangement of text in css

藏色散人
藏色散人Original
2021-07-22 11:36:5212134browse

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.

How to achieve horizontal arrangement of text in css

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:
How to achieve horizontal arrangement of text in css 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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn