最近需要写一个公交站牌的效果，需要达到的效果如图（网上找的图）
Paste_Image.png
但是不知道如何实现文字竖排两端对齐，文字竖排我相信大家都会的，在阴差阳错下我竟然对齐了，现在记录下来
.station是外面这个蓝色 span是里面每个文本行
.stations{ background: #BBDDF1;
text-align: center;
padding: 0.5rem 0.5rem;
display: flex;
align-items: stretch;
justify-content: center;
height: 10rem;
span{ width: 1rem;
font-size: 1rem;
display: inline-block;
text-align-last: justify;
writing-mode:vertical-rl;
}
}
关键点是：
display: flex;
text-align-last: justify;
writing-mode:vertical-rl;
实现效果图：
Paste_Image.png
网友评论