css关于div中文字对其左右两端

Posted 2023-02-28 木极子

html:

<div style="width: 100px;" class="place">中国</div>
<div style="width: 100px;" class="place">加拿大</div>

css:

.place 
    text-align:justify;
    text-justify:distribute-all-lines;/*ie6-8*/
    text-align-last:justify;/* ie9*/
    -moz-text-align-last:justify;/*ff*/
    -webkit-text-align-last:justify;/*chrome 20+*/

@media screen and (-webkit-min-device-pixel-ratio:0)/* chrome*/
    .place:after
        content:".";
        display: inline-block;
        width:100%;
        overflow:hidden;
        height:0;
    

效果：