CSS3实现文本竖排排列且两端对齐

最近需要写一个公交站牌的效果,需要达到的效果如图(网上找的图)

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

你可能感兴趣的:(CSS3实现文本竖排排列且两端对齐)