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
How to allow remote access to open ports in Linux
1. Modify the firewall configuration file # vi /e...
Detailed explanation of JavaScript's built-in Date object
Table of contents Date Object Creating a Date Obj...
Solutions for building ping and nfs in embedded Linux development environment
1. Embedded Software Level 1) Bootloader->Boot...
A complete example of implementing a timed crawler with Nodejs
Table of contents Cause of the incident Use Node ...
Detailed explanation of performance optimization ideas for React functional components
Optimization ideas There are two main optimizatio...
Implementation of nginx multiple locations forwarding any request or accessing static resource files
This article mainly introduces the implementation...
Detailed example of clearing tablespace fragmentation in MySQL
Detailed example of clearing tablespace fragmenta...
HTML+css to create a simple progress bar
1. HTML code Copy code The code is as follows: Ex...
React's reconciliation algorithm Diffing algorithm strategy detailed explanation
Table of contents Algorithmic Strategy Single-nod...
Database query which object contains which field method statement
The database queries which object contains which ...
JavaScript design pattern learning adapter pattern
Table of contents Overview Code Implementation Su...
Practice of using Vite2+Vue3 to render Markdown documents
Table of contents Custom Vite plugins Using vite-...
Introduction to the usage of exists and except in SQL Server
Table of contents 1. exists 1.1 Description 1.2 E...
Detailed explanation of MySql view trigger stored procedure
view: When a temporary table is used repeatedly, ...
Detailed explanation of memory management of MySQL InnoDB storage engine
Table of contents Storage Engine Memory Managemen...