最近的一个项目中要使文字垂直排列，也就是运用了CSS的writing-mode属性。
writing-mode最初时ie中支持的一个属性，后来在CSS3中增添了这一新的属性，所以在ie中和其他浏览器中的语法会有区别。
一、CSS3标准
writing-mode:horizontal-tb;//默认：水平方向，从上到下
writing-mode:vertical-rl; //垂直方向，从右向左
writing-mode:vertical-lr; //垂直方向，从左向右
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.textinfo {
height: 250px;
padding: 10px;
border: 1px solid red;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="textinfo">
发布已启动: 项目: QL.Back.API, 配置: Release Any CPU
</div>
</body>
</html>
二、实现按钮点击文字下沉效果
我们可以设置文字的writing-mode，然后在结合text-indent来实现文字点击时的下沉效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.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>点击领红包</span>
<p class="vertical-text btn">开 </p>
</body>
</html>
更多：
原文地址：https://www.cnblogs.com/tianma3798/p/12177496.html
时间： 2024-11-08 12:58:57