css 实现单行文字两端对齐

1、问题：给单行文字设置  text-align: justify;  样式时  不起作用。

例：<div class="box">两端对齐</div>

<style>
        .box {
            width: 150px;
            height: 30px;
            line-height: 30px;
            margin: 50px auto;
            background-color: green;
            color: #fff;
            text-align: justify;
        }
    </style>

效果：

2、解决方法：

.box:after {
            content: '';
            width: 100%;
            display: inline-block;
        }

效果：