关注前端开发
关注用户体验

CSS之文本两端对齐

说起text-align,大家一定都不觉得陌生,我们常用关键字left、right、center实现行内元素相对父元素左、右、居中对齐,当然我们也使用justify来实现文本两端对齐。

如上图,两端对齐相对于左对齐,视觉上显得整齐有序。但justify对最后一行无效,通常这样的排版对整段文字是极好的,我们并不希望当最后一行只有两个字时也两端对齐,毕竟这是不便于阅读的,那么当我们只有一行文本,但要实现单行文本两端对齐怎么解决(如下图的表单项效果)?

根据justify对最后一行无效,我们可以新增一行,使该行文本不是最后一行,实现如下:

//html
<div class="item">
    <span class="label" >{{item.label}}</span>:
    <span class="value">{{item.value}}</span>
</div>

//scss
.item {
    height: 32px;
    line-height: 32px;
    margin-bottom: 8px;
    .label {
        display: inline-block;
        height: 100%;
        width: 100px;
        text-align: justify;
        vertical-align: top;
        &::after {
            display: inline-block;
            width: 100%;
            content: '';
            height: 0;
        }
    }
    .value {
        padding-right: 10px;
    }
}

but以上写法可以说是比较麻烦的,重点来啦,最近新了解到的一个属性text-align-last,该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。

//scss
.item {
    margin-bottom: 8px;
    .label {
        display: inline-block;
        height: 100%;
        min-width: 100px;
        text-align: justify;
        text-align-last: justify;
    }
    .value {
        padding-right: 10px;
    }
}

相比第一种实现,第二种实现方式就简单了不少,不过该属性有兼容性问题,大家可以根据情况决定实现方式,想了解更多关于text-align-last的说明,参见https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align-last

赞(150)
未经允许不得转载:大前端 » CSS之文本两端对齐
分享到: 更多 (0)

评论 25

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #25

    informed of any kind of updates. Fabulous work and much success in your business endeavors!

    Pricilla Syrstad1周前 (05-15)回复
  2. #24

    There are certainly a couple more details to take into consideration, but thank you for sharing this information.

    Nonton Anime2周前 (05-10)回复
  3. #23

    Outstanding post, I think blog owners should larn a lot from this blog its really user genial .

    cat care2周前 (05-08)回复
  4. #22

    both LG and LiteOn makes a great performing dvd burner, they also feature those anti-shock mount`

    agen poker3周前 (05-05)回复
  5. #21

    I couldn’t have really asked for a more rewarding blog. You’re there to give excellent suggestions, going directly to the point for simple understanding of your target audience. You’re surely a terrific expert in this subject. Thank you for remaining there human beings like me.

    rajapoker3周前 (05-03)回复
  6. #20

    Thanks for this nice post. …

    Jeugdpuistjes1个月前 (04-19)回复
  7. #19

    Thanks for this nice post. …

    Huidverbetering1个月前 (04-18)回复
  8. #18

    Nice post! Thank you.

    skin care1个月前 (04-17)回复
  9. #17

    Enjoyed the post.

    floaten1个月前 (04-17)回复
  10. #16

    Thanks for this nice post. …

    boekhouding breda1个月前 (04-10)回复
  11. #15

    Hello. impressive job. I did not expect this. This is a excellent story. Thanks!

    Huey Wagers2个月前 (04-08)回复
  12. #14

    This method write-up appears redeem plenty of targeted visitors. Find out how to support it? Them provides pleasing appealing overlook about elements. Reckon possessing things exact also great provide facts about is the most essential advantage.

    my singing monsters2个月前 (03-28)回复
  13. #13

    技术宅就是这么牛B

    鸟叔2个月前 (03-27)回复
  14. #12

    学习

    遇松2个月前 (03-18)回复
  15. #11

    I have been surfing online more than three hours as of late, but I never found any attention-grabbing article like yours. It is pretty price enough for me. In my opinion, if all web owners and bloggers made excellent content material as you probably did, the web will be a lot more helpful than ever before.

    Arden Jerden2个月前 (03-11)回复
  16. #10

    支持!

    演员3个月前 (03-06)回复
  17. #9

    全栈前端学习有兴趣的可以加我QQ详细聊聊978442663

    mufengsm3个月前 (02-27)回复
  18. #8

    学习下

    xiaomo3个月前 (02-25)回复
  19. #7

    招聘:web前端,
    薪 资:12k–30k人民币,具体根据实际工作能力,专业面试评级确定。
    工作地点:泰国
    福利:正规工作签证、包食宿、团建聚餐、节假日活动,带薪回国休假报销来回机票
    其他岗位:安卓、IOS、java开发,软件测试
    联系方式:QQ私信、
    微信:TH0631280401
    泰国电话:+66 0631280401

    青青3个月前 (02-22)回复
  20. #6

    从七月中旬开始做混合app,到8月中下旬app上线。已经完成了一个简单的app并且在腾讯和苹果appstore上线了,这期间遇到过无数的坑,主要是熟悉和使用mui框架,h5+,以及调用原生api等,入坑已深,现在正准备开发一款旅游类的混合app,原型图已经出。现在准备开工了。同时,希望有一起做混合app的,有兴趣加qq群260548659一起讨论交流学习,爬坑,共同进步。

    show3个月前 (02-20)回复
  21. #5

    我写的冒号占了一个位,没有紧靠着label最后一个文字

    小谢3个月前 (02-12)回复
  22. #4

    怎么联系

    你好5个月前 (01-01)回复
  23. #3

    5555个月前 (12-20)回复
  24. #2

    222

    hjj5个月前 (12-18)回复
  25. #1

    6666

    dasad5个月前 (12-14)回复

themebetter 国内更好的WordPress主题服务商

立即前往