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: -ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb 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
Recommend
Easyswoole one-click installation script and pagoda installation error
Frequently asked questions When you are new to ea...
JS calculates the probability of winning based on the prize weight
Table of contents 1. Example scenario 1.1. Set th...
Example of converting webpack images to base64
Download url-loader yarn add -D url-loader module...
7 ways to vertically center elements with CSS
【1】Know the width and height of the centered elem...
21 MySQL standardization and optimization best practices!
Preface Every good habit is a treasure. This arti...
How to pass W3C validation?
In addition to setting regulations for various ta...
Detailed explanation of JavaScript's built-in Date object
Table of contents Date Object Creating a Date Obj...
Summary of practical skills commonly used in Vue projects
Table of contents Preface 1. Use $attrs and $list...
Detailed explanation of the data responsiveness principle of Vue
This article is mainly for those who do not under...
Vue template compilation details
Table of contents 1. parse 1.1 Rules for intercep...
Complete code for implementing the vue backtop component
Effect: Code: <template> <div class=&quo...
In-depth analysis of MySQL from deleting the database to running away_Advanced (I) - Data Integrity
1. Introduction to Data Integrity 1. Introduction...
HTML table tag tutorial (7): background color attribute BGCOLOR
The background color of the table can be set thro...
Example of implementing login effect with vue ElementUI's from form
Table of contents 1. Build basic styles through E...
Detailed explanation of several ways to export data in Mysql
There are many purposes for exporting MySQL data,...