Home > Article > Web Front-end > 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
Effect | |
---|---|
Horizontal arrangement | |
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: "
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!