css实现文本两端对齐的方法


当前第2页 返回上一页

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


1

2

//html<div class="item">

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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

//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,该属性定义的是一段文本中最后一行在被强制换行之前的对齐规则。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

//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;

    }

}

相比第一种实现,第二种实现方式就简单了不少,不过该属性有兼容性问题,大家可以根据情况决定实现方式。

( 推荐学习:CSS教程 )

以上就是css实现文本两端对齐的方法的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

css li怎么水平居中对齐

声明css有哪几种方式

css li的点怎么去掉

css如何剪切元素??clip属性的使用

css如何改变图片的颜色

css3 flexbox该怎么使用?

css需要什么环境

css样式表常驻留在文档的什么区域中

css如何去除inline-block元素间的间距?(多种方法)

css中的content属性该如何使用

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...