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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容