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
Detailed explanation of Vuex environment
Table of contents Build Vuex environment Summariz...
How to set the user root password and remote connection method for Alibaba Cloud ECS instance
After purchasing an Alibaba Cloud server, you nee...
MySQL series: Basic concepts of MySQL relational database
Table of contents 1. Basic Concepts 2. Developmen...
MySQL partitions existing tables in the data table
Table of contents How to operate Operation proces...
Use viewport in meta tag to define screen css
<meta name="viewport" content="w...
Centos7 Zabbix3.4 email alarm configuration (solving the problem that the email content is xx.bin attachment)
Table of contents 1. Add monitoring Linux host 2....
The impact of limit on query performance in MySQL
I. Introduction First, let me explain the version...
How to represent various MOUSE shapes
<a href="http://" style="cursor...
JavaScript single thread and asynchronous details
Table of contents 1. Task Queue 2. To explain som...
Web Design: Web Music Implementation Techniques
<br />When inserting music into a web page, ...
Using Docker run options to override settings in the Dockerfile
Usually, we first define the Dockerfile file, and...
This article takes you into the world of js data types and data structures
Table of contents 1. What is dynamic typing? 2. D...
Detailed explanation of downloading, installing and using nginx server
download http://nginx.org/en/download.html Unzip ...
Vue implements Modal component based on Teleport
Table of contents 1. Get to know Teleport 2. Basi...
Detailed explanation of the use of the clip-path property in CSS
Use of clip-path polygon The value is composed of...