<div class="poem">
<h1>早发白帝城</h1>
<div class="author">
<span>李白</span>
<span class="year">701</span>
<span class="to">~</span>
<span class="year">762</span>
</div>
<p>朝辞白帝彩云间</p>
<p>千里江陵一日还</p>
<p>两岸猿声啼不住</p>
<p>轻舟已过万重山</p>
</div>
body {
display: flex;
justify-content: flex-end;
padding: 20px;
}
.poem {
align-self: end;
color: #333;
font-size: 1.4rem;
/*
文字书写方向
默认 horizontal-tb 表示从上到下
vertical-rl 表示从右向左
*/
writing-mode: vertical-rl;
}
.author {
color: #aaa;
font-size: 0.8rem;
margin-right: -30px;
text-align: end;
}
.author .year {
/* 设置文本朝向 */
text-orientation: upright;
/* 文字正常朝向时是否连着组合起来 */
text-combine-upright: all;
margin: 5px 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.