text-align-last 苹果浏览器(macOS – Safari)兼容的解决方法

text-align-last:justify 用于后一行元素两端对齐，可以把元素平均的分布在父元素中，并且左右没有空白。 不过苹果浏览器(safari)不支持text-align-last, 解决的方法也很简单。原理是使用伪元素 ：after, 添加个后一行，这样 text-align-last就可以不用了。

text-align-last 兼容的代码

.tal:after {
    content: " ";
    width: 100%;
    display: inherit;
}

没有伪元素的效果

完整的示例

.con {
    text-align: justify;
}

/* 这个是重点 */
.con:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

.con .item {
    width: 30%;
    background: gray;
    display: inline-block;
    margin-bottom: 10px;
    min-width: 40px;
}

html

<div class="con">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

添加伪元素的终效果