text两端对齐（兼容写法）

style 样式-------------------------------

<style type="text/css">

#box1{

text-align: justify;

/* text-align-last: justify; */

/*

因为text-align-last不是一般的兼容性差劲，所以

利用伪类元素让最后一行文字排行不是第一位了

*/

}

#box1:after,.justify:after{//主要在于伪类的实现

content:'';

width:100%;

display: inline-block;

}

.justify{

 text-align: justify;

}

 

.justify i{

 width:24px;

 background: black;

 font-style:  normal;

 color:white;

 line-height:24px;

 display:inline-block;

 text-align:center;

 border-radius:50%;

}

</style>

html代码----------------------------

<div id="box1">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

。。。。。。。。。。。。。。。。。这里有很多代码

</div>

<div class="container">

    <div class="justify">

        <i>1</i>

        <i>2</i>

        <i>3</i>

        <i>4</i>

        <i>5</i>

    </div>

</div>