writing-mode 属性定义了文本在水平或垂直方向上如何排布。
属性:
- horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom
- vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left
- vertical-lr:垂直方向内内容从上到下,水平方向从左到右
- sideways-lr:内容垂直方向从下到上排列
- sideways-rl:内容垂直方向从上到下排列
eg:
.poetry {
position: relative;
400px;
}
.poetry h2 {
position: absolute;
top: 20px;
right: 40px;
30px;
color: #ffffff;
z-index: 9;
font-weight: normal;
letter-spacing: 3px;
writing-mode: vertical-lr; //在垂直
}
<div class="poetry"> <h2>山水绕城春作涨,江涛入海夜通潮</h2> <img src="http://p3.pstatp.com/origin/pgc-image/152134897294786aa5020f7" alt=""> </div>