美文网首页
CSS3实现文本竖排排列且两端对齐

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

作者: 媛媛起床了 | 来源:发表于2016-10-05 21:33 被阅读247次

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

    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实现文本竖排排列且两端对齐

          本文链接:https://www.haomeiwen.com/subject/jzfeyttx.html