最近需要寫一個(gè)公交站牌的效果,需要達(dá)到的效果如圖(網(wǎng)上找的圖)
但是不知道如何實(shí)現(xiàn)文字豎排兩端對(duì)齊考杉,文字豎排我相信大家都會(huì)的,在陰差陽錯(cuò)下我竟然對(duì)齊了舰始,現(xiàn)在記錄下來
.station是外面這個(gè)藍(lán)色 span是里面每個(gè)文本行
.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;
}
}
關(guān)鍵點(diǎn)是:
display: flex;
text-align-last: justify;
writing-mode:vertical-rl;
實(shí)現(xiàn)效果圖: